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

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

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

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

【问题讨论】:

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

标签: css responsive-design responsive


【解决方案1】:

你可以用 CSS object-fit:

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

contain 取决于您的需求。

【讨论】:

    【解决方案2】:

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

    图片{ 高度:50vw; 宽度:100vw; }

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-09-24
      • 2014-05-29
      • 1970-01-01
      • 2018-10-02
      • 1970-01-01
      • 1970-01-01
      • 2016-09-14
      相关资源
      最近更新 更多