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

Question

我找到了这个线程—— 如何在保持图像纵横比的同时拉伸图像以填充

？ ——这不完全是我想要的。

我有一个 div 具有一定的尺寸和里面的图像。无论图像是横向还是纵向，我都想 始终 用图像填写 di v 。并且图像是否被截断也没关系（div本身已隐藏溢出）。

因此，如果图像是纵向的，我希望 width 是 100% 和 height:auto 所以它保持成比例。如果图像是横向的，我希望 height 是 100% 和 width to be auto`。听起来很复杂吧？

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

因为我不知道该怎么做，所以我只是简单地创建了一个我的意思的快速图像。我什至无法恰当地描述它。

所以，我想我不是第一个问这个的人。但是我真的找不到解决方案。也许有一些新的 CSS3 方法可以做到这一点 - 我正在考虑 flex-box。任何想法？也许它比我预期的更容易？

原文由 matt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我正确理解你想要什么，你可以离开图像的宽度和高度属性以保持纵横比并使用 flexbox 为你做居中。

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

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

JSFiddle 在这里。

我在 IE9、Chrome 31、Opera 18 上测试成功。但没有测试其他浏览器。一如既往，您必须考虑您的特定支持要求。

原文由 Isius 发布，翻译遵循 CC BY-SA 4.0 许可协议