Html 固定高度的全宽图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20763684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width image with fixed height
提问by Simon
I'm trying to create an image looking like the cover image here, using only css and html. I've tried different things but nothing has worked so far.
我正在尝试仅使用 css 和 html创建一个看起来像这里的封面图像的图像。我尝试了不同的东西，但到目前为止没有任何效果。
This is my html code:
这是我的 html 代码：
<div id="container">
<img id="image" src="...">
</div>
What css code should I use?
我应该使用什么 css 代码？
回答by Cilan
Set the image's widthto 100%, and the image's heightwill adjust itself:
将图像的宽度设置为100%，图像的高度将自行调整：
<img style="width:100%;" id="image" src="...">
If you have a custom CSS, then:
如果您有自定义CSS，则：
HTML:
HTML：
<img id="image" src="...">
<img id="image" src="...">
CSS:
CSS：
#image
{
width: 100%;
}
Also, you could do File -> View Sourcenext time, or maybe Google.
另外，你File -> View Source下次可以这样做，或者谷歌。
回答by danielpenalverramila
If you want to have same ratio you should create a container and hide a part of the image.
如果你想拥有相同的比例，你应该创建一个容器并隐藏图像的一部分。
.container{
width:100%;
height:60px;
overflow:hidden;
}
.img {
width:100%;
}<div class="container">
<img src="http://placehold.it/100x100" class="img" alt="Our Location" />
</div>
回答by Orville Patterson
This can done several ways. I usually do it from my class.
这可以通过多种方式完成。我通常在课堂上这样做。
From class
从班级
.image
{
width:100%;
}
and for this your html would be:
为此，您的 html 将是：
<img class="image" src="images/image_name">
or if you want to style it using inline styling then you would just have:
或者，如果您想使用内联样式对其进行样式设置，那么您只需：
<img style="width:100%; height:60px" id="image" src="images/image_name">
I however recommend doing it from your external style-sheet because as your project grows you will realize that the entire thing is easier managed with separate files for your html and your css.
但是，我建议从您的外部样式表中执行此操作，因为随着您的项目的增长，您会意识到使用 html 和 css 的单独文件可以更轻松地管理整个事情。
回答by Brane
In order not to scratch the image you will need to use:
为了不刮伤图像，您需要使用：
max-height: 200px;
width: auto;
回答by Mark
Set the height of the parent element, and give that the width. Then use a background image with the rule "background-size: cover"
设置父元素的高度，并给出宽度。然后使用具有规则“背景大小：封面”的背景图像
.parent {
background-image: url(../img/team/bgteam.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
}
回答by Martin42006
If you don't want to lose the ratio of your image, then don't bother with height:300px;and just use width:100%;.
如果您不想丢失图像的比例，那么请不要打扰，height:300px;只需使用width:100%;.
If the image is too large, then you will have to crop it using an image editor.
如果图像太大，则必须使用图像编辑器对其进行裁剪。
回答by Palak Jain
<div id="container">
<img style="width: 100%; height: 40%;" id="image" src="...">
</div>
I hope this will serve your purpose.
我希望这将有助于您的目的。
回答by Amin Mukhamadiev
you can use pixels or percent.
您可以使用像素或百分比。
<div id="container">
<img id="image" src="...">
</div>
css
css
#image
{
width:100%;
height:
}
