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

Question

我目前正在开展一个项目，我们使用带图片的滑块。此滑块显示宽度为100％，目前我们正在调整高度以使滑块响应，以防用户调整浏览器窗口大小或使用手机访问网站。

然而，该网站是针对一个艺术家，他显然不希望以任何方式改变图像，特别是不改变宽高比。所以我们正在研究的是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

您必须向max-width:100%提供img。

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

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;