Question

我有一个固定的div，其中css 宽度：400px;身高：280像素; 但我的形象来自各个方面，有些是肖像有些风景。无论源大小如何，我如何适合/拉伸/填充我的图像到div大小？

Answer 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类似的background-size: cover，当您使用img作为背景时。

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>

Answer 2

我认为最好的方法就是用背景图像来做。

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

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

Answer 3

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

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

您也可以使用object-fit: cover

Answer 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

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

4 个答案: