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

【问题标题】：Adjust height of image to 100% width without altering aspect ratio在不改变纵横比的情况下将图像的高度调整为 100% 宽度
【发布时间】：2015-03-13 17:51:33
【问题描述】：

我目前正在开展一个项目，我们在其中使用带有图像的滑块。此滑块以 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，否则我们无法正确显示滑块控件。这是我们当前情况的图片（第一张图片）和预期行为（第二张图片）。

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

图片的纵横比不能改变；
我们不能过多地裁剪图像（只能稍微裁剪）；
请记住最低高度；

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

【问题讨论】：

你能提供一个小提琴吗？
@dippas 可以，请稍等。
@dippas 它看起来像下面这样：jsfiddle.net/2ofm1dv7
尽量不要同时使用min-height和height: auto;。在我看来，只需在图片上使用min-height 和max-width 而不是width 就可以了，不是吗？
如果这是您想要的，请告诉我：jsfiddle.net/btsx6os0，查看整页结果：jsfiddle.net/btsx6os0/embedded/result

标签： css responsive-design media-queries aspect-ratio

【解决方案1】：

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

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

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

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

以下是根据上述 cmets 的工作 sn-p：

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>

【讨论】：