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

【问题标题】：Responsive images with fixed height CSS具有固定高度 CSS 的响应式图像
【发布时间】：2019-06-29 19:03:35
【问题描述】：

我想将图像放入具有固定高度的 div 中，并且图像应该扩展到 100% 而不会弄乱纵横比，并且还希望图像具有响应性。我试过了，

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

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

【问题讨论】：

寻求帮助的问题（“为什么/如何使此代码无法运行？”）必须包括所需的行为、特定问题或错误以及 在问题本身中重现它所需的最短代码。请参阅：如何创建minimal reproducible example。

【解决方案1】：

你可以用 CSS object-fit:

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

或contain 取决于您的需求。

【讨论】：

【解决方案2】：

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

图片{ 高度：50vw；宽度：100vw； }

在此示例中，您的图像将具有 100% 的宽度和基于宽度的 50% 的高度

【讨论】：