具有固定高度的全宽图像

Question

我试图创建一个图像看起来就像封面图片在这里,只使用CSS和HTML.我尝试了不同的东西但到目前为止还没有任何工作.

这是我的HTML代码:

<div id="container">
    <img id="image" src="...">
</div>

我应该使用什么css代码？

Answer 1

将图像的宽度设置为100%,图像的高度将自行调整:

<img style="width:100%;" id="image" src="...">

如果您有自定义CSS,那么:

HTML:

<img id="image" src="...">

CSS:

#image
{
    width: 100%;
}

此外,你可以File -> View Source下次,或者谷歌.

谢谢你们，但我找到了：D `#container { background-image: url(../img/team/bgteam.jpg); 背景重复：不重复；背景位置：居中；-webkit-background-size: 封面；背景尺寸：封面；填充顶部：450px；背景图片：网址（...）；}` (2认同)

Answer 2

如果你想拥有相同的比例，你应该创建一个容器并隐藏图像的一部分。

.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>