CSS图片固定宽度自适应高度

Question

我有一个固定的div，CSS样式为width: 400px; height: 280px;，但我的图像来自各种尺寸，有些是纵向的，有些是横向的。我该如何将图像适应/拉伸/填充到div大小，而不受源大小的影响？

- 4 Leave Cover

Answer 1

@giorgi-parunov提供了最简单和最好的方法。但是如果你想使用img标签，我建议你使用CSS使图像响应

元素。

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

您也可以使用 object-fit: cover。

- omukiguy

Answer 2

如果您在 div 上设置了固定的大小，您可以将图片的 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>

如果您想填充

，但同时又想保持图像的纵横比，您可以使用。当您将img用作背景时，这类似于。请注意，保留HTML标签。

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>

- Nenad Vracar

Answer 3

我认为最好的方法是使用background-image来实现，下面是HTML代码：<div style="background-image: url("paper.gif"); background-size: cover; background-position: center;"></div>。这是在不使用JavaScript的情况下将图片添加到div中的最佳方法。

- Giorgi Parunov

Answer 4

你可以查看这个答案来将任何图像适应容器并居中显示 https://dev59.com/nmkv5IYBdhLWcg3wwTdm#36063374 在你的情况下，代码应该是

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

- Renzo Calla