Html 如何仅使用CSS在具有恒定纵横比的容器中自动调整图像？

资料来源：

如何仅使用CSS以恒定纵横比自动调整img？以下是一个正确拟合图像的示例：

---

您可以在css中尝试此功能

<div id="box">
   <div id="wrap">
      <img>
   </div>
</div>

还是好的旧HTML

#box {
   width: 500px;
   min-height: 400px;
   max-height: 600px;
}

---

尝试此操作以固定图像比率

父容器的Css-最小高度：400px；最大高度：600px

然后对于图像本身：

<img src="http://imageurl.jpg" style="width: auto; height: auto;">

---

另一个解决方案是使用对象拟合。 它指定如何调整图像或视频元素的大小以适合其容器

如果使用对象匹配：覆盖；它将切断图像的侧面，保留纵横比，并填充空间：

#box {
   width:100%;
   height:100%;
}

#box img {
width :100%;
}

关于浏览器支持：

有关此css属性的更多信息：

注:

对象拟合仅适用于和元素

---

如果你想让容器也遵循最小和最大高度，我不认为使用纯CSS可以做到这一点。解释你的问题，你可以做图像响应，它们会调整演示的大小-@grinmax很清楚OP在问什么。他们需要一个解决方案，而不仅仅是一个简单的响应图像。根据纵横比，如果可能的话，他们需要一个图像来始终填充容器元素的宽度和/或高度。只有图像保留在背景中并添加属性background size:cover；根据原来的问题，现在这是最好的答案。刚刚测试过，效果很好。

#box {
   width:100%;
   height:100%;
}

#box img {
width :100%;
}

#box {
   width: 100%;
   height: auto;

}

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