如何在不同的视口尺寸下按比例缩放幻灯片图像？

Question

我找到了我真正喜欢的图片幻灯片显示的代码，但是并没有在不同的浏览器尺寸下调整大小。我尝试使用vh属性来实现这一点，但是它没有用–我无法使图像按比例缩放。因此，我尝试添加属性max-width：100％和height：auto，以使图像按比例缩放。但是会发生以下情况：

1. 当您缩小浏览器窗口的大小时，只有最宽的图像会在所有点上按比例缩放；其他的将保持不变，直到浏览器窗口等于由指定的width和height属性定义的图像宽度为止。

2. 图像在调整大小后的浏览器窗口中居中，只要宽度为1732 px（最宽图像的宽度和包含图像的“ stage” id的宽度）或更大即可。

是否有一种方法可以使所有浏览器尺寸的所有图像缩放得更小？

Crab Apple

Answer 1

只需将最大宽度添加到#stage

#stage{
    max-width: 100%;
}

并将!important放在图片max-width

#stage img {
    max-width: 100% !important
}