固定高度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

您可以使用VW（视图宽度）设置宽度和高度，这意味着您的图像将具有基于屏幕宽度的宽度和高度

  

img {       高度：50vw;       宽度：100vw; }

在此示例中，您的图片将具有100％的宽度和50％的高度（基于宽度）