如何用子图像覆盖固定大小的容器保持完整 width/height 比例？

Question

所以我有一个 300x300 的方形容器和一个 <img src="" /> 图像。

我想要的是图像覆盖整个容器，但保持其 width/height 比例。

如果图片的宽度小于它的高度（纵向），它应该有 100% 的宽度和一部分高度被裁剪。
如果高度小于宽度（横向），它应该有 100% 的高度和要裁剪的额外宽度。

如果图像都是横向的或所有纵向的，我可以轻松地将它们放入容器中，方法是将宽度或高度设置为 100% 并将高度或宽度分别设置为 auto:

.container {
  border: 1px solid black;
  margin: 30px;
  display: inline-block;
  
  width: 300px;
  height: 300px;
  overflow: hidden;
}

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

<div class="container">
  <img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>

<div class="container">
  <img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>

但是有没有通用的 HTML/CSS ONLY 方法让它自动覆盖容器而不考虑方向？

注1：内图不应以任何方式变形。它只能按照上述规则适合容器。

注释 2：我很好奇 并不意味着 background-image: url('')

的方法

Answer 1

试试这个

.container {
  border: 1px solid black;
  margin: 30px;
  display: inline-block;
  
  width: 300px;
  height: 300px;
  overflow: hidden;
}

img {
 width: fit-content;
  min-height:300px;
}

<div class="container">
  <img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>

<div class="container">
  <img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>

Answer 2

我已经尝试了 Sitaram 在问题的评论部分中提出的建议，这似乎是最佳解决方案。

除了图像会覆盖整个正方形之外，它们会覆盖容器，无论宽度或高度如何。

片段：

.container {
  border: 1px solid black;
  margin: 30px;
  display: inline-block;
  
  width: 300px;
  height: 300px;
  overflow: hidden;
  resize: both;
}

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

<div class="container">
  <img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>

<div class="container">
  <img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>

如何用子图像覆盖固定大小的容器保持完整 width/height 比例？

How to cover fixed size container with child image keeping full width/height ratio?

html

javascript

css

sass

less