具有固定宽度和自动调整高度的 css 图像答案

【问题标题】：css Image with fixed width and auto adjust height具有固定宽度和自动调整高度的 css 图像
【发布时间】：2018-06-27 14:11:04
【问题描述】：

我有一个固定的 div，css width: 400px; height: 280px; 但我的图片来自不同的维度，有些是纵向的，有些是横向的。无论源大小如何，如何将图像适合/拉伸/填充到 div 大小？

【问题讨论】：

标签： css

【解决方案1】：

如果您在 div 上设置了固定大小，则只需将 img 的 height/width 设置为 100%。

div {
  width: 150px;
  height: 50px;
  border: 1px solid black;
}
img {
  width: 100%;
  height: 100%;
}

<div>
  <img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>

如果你想填充div，但又想保持图像纵横比，你可以使用object-fit: cover，当你使用img作为背景时，它类似于background-size: cover。

div {
  width: 100px;
  height: 150px;
  border: 1px solid black;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div>
  <img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>

【讨论】：

【解决方案2】：

@giorgi-parunov 有最简单最好的方法。但是如果你想使用，我建议你使用 css 来使图像响应 div。

img {
     max-width:100%;
     height: auto
}

你也可以使用object-fit: cover

【讨论】：

【解决方案3】：

我认为最好的方法是使用背景图像。

HTML<div style="background-image: url("paper.gif"); background-size: cover; background-position: center;"></div>

这是在没有 Javascript 的情况下将图像添加到 div 的最佳方式。

【讨论】：

【解决方案4】：

您可以检查此答案以将任何图像放入居中的容器中 https://stackoverflow.com/a/36063374/2894798 在您的情况下，代码将是

 .container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  width: 400px; /*customize to your needs 100%*/
  height: 280px; /*customize to your needs*/
}
.container img
{
 max-width:100%;
 max-height:100%;
}

这里是fiddle

【讨论】：