如何用子图像覆盖固定大小的容器，保持全宽/高比？答案

【问题标题】：How to cover fixed size container with child image keeping full width/height ratio?如何用子图像覆盖固定大小的容器，保持全宽/高比？
【发布时间】：2020-10-17 06:30:53
【问题描述】：

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

我想要的是覆盖整个容器的图像，但保持其宽度/高度比。

如果图像的宽度小于其高度（纵向），则它应该具有 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('')

的方法

【问题讨论】：

您可以在您的 img 标签上尝试“object-fit:cover”，并将高度和宽度设置为 100%。这将有助于覆盖整个容器而不会出现任何失真，并且应该适用于所有场景

标签： javascript html css sass less

【解决方案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>

【讨论】：

不幸的是，添加 min-height 会使 sn-p 中的第一个图像失真。它达到 100% 的容器宽度和固定的 300 像素高度，尽管该比率使其小于 300 像素。请阅读问题底部的注1。

【解决方案2】：

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

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

片段：

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

【讨论】：