具有固定高度CSS的响应图像

Question

我想在具有固定高度的DIV中安装一个图像，并且图像应扩大到100％而不会弄乱纵横比，并且还希望图像响应能力。我尝试了，

img{
    height:500px;
    width:100%;
  }

这弄乱了纵横比。我该如何解决？

Answer 1

您可以使用CSS object-fit：

进行操作

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

或contain取决于您的需求。

Answer 2

您可以使用大众（查看宽度）设置宽度和高度，这意味着您的图像将具有屏幕宽度的宽度和高度

img { 身高：50VW; 宽度：100VW;}

在此示例中