如何在保持图像比例的同时用图像填充div？

Question

我找到了这条线索-如何拉伸图像以填充

我有一个具有一定大小的div和其中的图像。无论图像是横向还是纵向，我都想始终用图像填充div。图像是否被切断也没关系（div本身隐藏了溢出）。

因此，如果图像是纵向的，我希望宽度是100%，高度是自动的，所以它保持成比例。如果图像是横向的，我希望高度为100%，宽度为自动。听起来很复杂对吧？

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

因为我不知道怎么做，我只是简单地创建了一个我的意思的快速图像。我甚至无法正确描述它。

所以，我想我不是第一个问这个问题的人。然而，我真的找不到解决这个问题的方法。也许有一些新的CSS3方法可以做到这一点——我在考虑flex-box。有什么想法吗？也许它比我想象的更容易？

Answer 1

下面的所有答案都有固定的宽度和高度，这使得解决方案“没有响应”。

为了达到效果，同时保持图像的响应性，我使用了以下方法：

1. 在容器内放置一个具有所需比例的透明gif图像
2. 给出一个图像标签内联css背景，其中包含您想要调整大小和裁剪的图像

HTML：

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Answer 2

虽然有点晚了，但我还是遇到了同样的问题，最后在另一个stackoverflow帖子的帮助下解决了这个问题(https://stackoverflow.com/a/29103071).

img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

希望这仍然帮助某人。

ps：还可以与max-高度、max-宽度、min-宽度和min-高度css属性一起使用。特别是使用100%或100vh/100vw等长度单位来填充容器或整个浏览器窗口非常方便。

Answer 3

如果我正确理解了您的需求，您可以将宽度和高度属性保留在图像之外，以保持纵横比，并使用flexbox为您进行居中。

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

html prettyprint-override"><div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>