在不改变宽高比的情况下将图像的高度调整为 100% 宽度

Question

我目前正在做一个项目，我们在其中使用带有图像的滑块。此滑块以 100% 的宽度显示，目前我们正在调整高度以使滑块响应，以防用户调整浏览器 window 或使用他们的 phone.[=15 访问网站=]

但是，该网站是为显然不希望以任何方式改变图像的艺术家而设计的，尤其是不改变宽高比。所以我们正在研究的是 height: auto 根据 width: 100% 正确调整图像高度，而不改变图像（纵横比）本身。

然而，这并没有像预期的那样工作，使用以下代码：

@media (min-width:1600px) {
    #header{
        height:auto;
        width: 100%;
        min-height: 630px;
        background-size: 100% auto;
    }

    #slidershadow {
        height: 630px;
    }
}

我们需要一些min-height，否则我们无法正确显示滑块控件。这是我们当前情况（第一张图片）和预期行为（第二张图片）的图片。

有没有办法调整滑块的响应大小，但请记住以下几点：

无法更改图片的纵横比；
我们不能裁剪太多图片（只能裁剪少许）；
要牢记最低身高；

如果有帮助，滑块中的所有图像都具有相同的大小。

Answer 1

你必须给你的img一个max-width:100%。

Plus background-size 仅在您使用 background-images 时有效。

由于您正在将 max-width 应用于您的 img，因此无需将 max-width 应用于其父级 #header

最后但并非最不重要的一点是尽量不要在同一个选择器中同时使用 min-height 和 height:auto。

以下是根据上述评论得出的工作片段：

img {
  max-width: 100%;
  height: auto
}
@media (min-width: 1280px) {
  #header {
    min-height: 500px;
  }
}
@media (min-width: 1600px) {
  #header {
    min-height: 630px;
  }
}

<div id="header">
  <img src="http://placehold.it/1920x630" />
</div>

在不改变宽高比的情况下将图像的高度调整为 100% 宽度

Adjust height of image to 100% width without altering aspect ratio

css

responsive-design

media-queries

aspect-ratio