我发现了一些我非常喜欢的图片幻灯片显示代码但没有在不同浏览器尺寸下调整大小。我尝试使用vh属性来实现，但它不起作用 - 我无法按比例缩放图像。所以我尝试添加属性max-width：100％和height：auto，这使得图像按比例缩放。但是会发生以下情况：
有没有办法让所有图像在所有浏览器尺寸下缩小？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#stage {
margin: 1em auto;
width: 1732px;
height: 1080px;
}
#stage img {
position: absolute;
max-width: 100%;
height: auto;
}
#stage img {
padding: 10px;
border: ;
background: #fff;
}
#stage img:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage img:nth-of-type(2) {
z-index: 10;
}
#stage img:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
</style>
</head>
<div id="stage">
<img src="http://www.bartonlewisfilm.com/cf_spring_&_thompson_east_v_1080.jpg" width="1394" height="1080">
<img src="http://www.bartonlewisfilm.com/cf_suffolk_btw_rivington_&_stanton_v_1080.jpg" width="1732" height="1080">
<img src="http://www.bartonlewisfilm.com/dr_chrystie_93_v_1080.jpg" width="1165" height="1080">
<img src="http://www.bartonlewisfilm.com/cf_franklin_&_w_bway_v_1080.jpg" width="726" height="1080">
</div>
<script type="text/javascript">
// Original JavaScript code by Chirp Internet: www.chirp.com.au
// Please acknowledge use of this code by including this header.
window.addEventListener("DOMContentLoaded", function(e) {
var maxW = 0;
var maxH = 0;
var stage = document.getElementById("stage");
var fadeComplete = function(e) { stage.appendChild(arr[0]); };
var arr = stage.getElementsByTagName("img");
for(var i=0; i < arr.length; i++) {
if(arr[i].width > maxW) maxW = arr[i].width;
if(arr[i].height > maxH) maxH = arr[i].height;
}
for(var i=0; i < arr.length; i++) {
if(arr[i].width < maxW) {
arr[i].style.paddingLeft = 10 + (maxW - arr[i].width)/2 + "px";
arr[i].style.paddingRight = 10 + (maxW - arr[i].width)/2 + "px";
}
if(arr[i].height < maxH) {
arr[i].style.paddingTop = 10 + (maxH - arr[i].height)/2 + "px";
arr[i].style.paddingBottom = 10 + (maxH - arr[i].height)/2 + "px";
}
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);
</script>
</html>
只需将最大宽度添加到#stage即可
#stage{
max-width: 100%;
}
并把!important放到图像max-width
#stage img {
max-width: 100% !important
}