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

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

然而，该网站是为一个艺术家谁显然不希望以任何方式改变图像，特别是不改变与高宽比。因此，我们正在研究的是使用

height:auto

根据

width:100%

正确调整图像高度，而不改变图像本身（纵横比）

但是，使用以下代码时，其工作方式与预期不同：

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

    #slidershadow {
        height: 630px;
    }
}

我们需要一些

最小高度

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

有没有一种方法可以调整滑块的大小，但要记住以下几点：

• 图像的纵横比不能改变
• 我们不能裁剪太多的图像（只有一点点）
• 有一个最低的高度要记住

---

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

您必须为您的

img提供
最大宽度：100%

加上
背景大小
仅在处理
背景图像
时有效

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

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

以下是根据上述注释编写的工作片段：


img{
最大宽度：100%；
高度：自动
}
@介质（最小宽度：1280px）{
#标题{
最小高度：500px；
}
}
@介质（最小宽度：1600px）{
#标题{
最小高度：630px；
}
}

你能提供一把小提琴吗？@dippas是的，我能，给我一秒钟。@dippas它看起来像是这样：尽量不要使用
min height
和
height:auto在一起。在我看来，只需在图像上使用
min height
和
max width
而不是
width
就可以了，不是吗？如果这是您想要的，请告诉我：，请参阅整页结果：