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

Question

来源：

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

和CSS：

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

如何仅使用CSS自动调整具有恒定宽高比的img？以下是适当拟合图像的示例：

Answer 1

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

#box img {
width :100%;
}

尝试此操作来修复图像比例。

Answer 2

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

如果您使用object-fit: cover;，它将切掉图像的侧面，保留长宽比，并填充空间：

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

关于浏览器支持：

有关此CSS属性的更多信息： object-fit CSS property

注意：

  

object-fit仅适用于<img>和<video>元素。

Answer 3

父容器的Css - min-height: 400px; max-height: 600px;

然后是图像本身：

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

}

Answer 4

你可以在你的css中尝试这个

img {
     width:auto;
     height:auto;
    }

或旧的HTML

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