固定高度的全宽图像答案

【问题标题】：Full width image with fixed height固定高度的全宽图像
【发布时间】：2014-01-12 20:39:56
【问题描述】：

我正在尝试创建一个看起来像封面图像here 的图像，只使用 css 和 html。我尝试了不同的方法，但到目前为止没有任何效果。

这是我的html代码：

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

我应该使用什么 css 代码？

【问题讨论】：

请展示您对 css 的尝试。

标签： html css image width cover

【解决方案1】：

将图片的宽度设置为100%，图片的高度会自行调整：

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

如果您有自定义 CSS，那么：

HTML：

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

CSS：

#image
{
    width: 100%;
}

另外，您下次可以使用File -> View Source，或者谷歌。

【讨论】：

感谢您的快速回复:) 但是如果我使用此代码，我会丢失图像的比例。
@user3132912 另外，我做了一个小的编码错误，我将.image 更改为#image，所以使用#image。另外，高度会自动调整，希望能解决您的问题。
谢谢，但如果你删除 height:50px 你的高度总是会改变，这取决于你的屏幕宽度。
@user3132912 那么你想做什么？有一次他们的屏幕大小就停止变化了吗？
谢谢伙计们，但我找到了：D #container { background-image: url(../img/team/bgteam.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; padding-top: 450px; background-image: url(...); }

【解决方案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>

【讨论】：

【解决方案3】：

为了不划伤您需要使用的图像：

max-height: 200px;
width: auto;

【讨论】：

很高兴能帮上忙 :)

【解决方案4】：

这可以通过多种方式完成。我通常在课堂上这样做。

来自班级

.image
{
    width:100%;


}

为此，您的 html 将是：

<img class="image" src="images/image_name">

或者，如果您想使用内联样式对其进行样式设置，那么您只需：

<img style="width:100%; height:60px" id="image" src="images/image_name">

不过，我建议从您的外部样式表中执行此操作，因为随着项目的发展，您会意识到使用 html 和 css 的单独文件可以更轻松地管理整个事情。

【讨论】：

然后删除 height 属性。我看到你在我回答后发表了评论。
原始图像有多高？和图片本身一样？

【解决方案5】：

设置父元素的高度，并给它宽度。然后使用规则为“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;
    }

【讨论】：

【解决方案6】：

如果您不想丢失图像的比例，请不要打扰height:300px;，只需使用width:100%;。

如果图像太大，则必须使用图像编辑器对其进行裁剪。

【讨论】：

从我编辑的答案中查看评论，然后编辑它显示 this 答案，这不仅仅是为了希望你能得到复选标记。 ..
抱歉，当我开始写这篇文章时，您的评论不存在。我会添加评论，但我不能，因为我还没有 50 代表。我并不想为某人的工作而功劳。

【解决方案7】：

<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

我希望这能达到你的目的。

【讨论】：

【解决方案8】：

您可以使用像素或百分比。

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

css

#image
{
width:100%;
height:
}

【讨论】：

对不起，我忘了把 40% 作为高度

【解决方案9】：

#image {
  width: 100%;
  height: 100px; //static
  object-fit: cover;
}

【讨论】：

当用八个现有答案回答一个六年前的问题时，重要的是要指出你的答案所针对的问题的新方面，并且可能要注意你使用的任何技术是在问题之后引入的被问到.. 此外，仅代码的答案通常可以通过解释它们的工作方式和原因来改进。
感谢您指出我今天在 ionic 中遇到了同样的问题，上述解决方案都不适合我。所以我修复了我使用上面的代码。而且我不想将任何样式应用于父 div。没有一个答案使用object-fit: cover;，所以我想在这里分享。