我找到了我非常喜欢的图片幻灯片代码，但它不会根据不同的浏览器尺寸调整大小。我尝试使用 vh 属性来实现这一点，但它没有用——我无法让图像按比例缩放。所以我尝试添加属性 max-width: 100% 和 height: auto 使图像按比例缩放。但是会发生以下情况:
当您缩小浏览器窗口时，只有最宽的图像会在所有点按比例缩放；其他的将保持静态，直到浏览器窗口等于图像的宽度(由指定的宽度和高度属性定义)。
图像在调整后的浏览器窗口中居中，只要它的宽度为 1732 像素(最宽图像的宽度和包含图像的“舞台”id 的宽度)或更大。
有没有办法在所有浏览器尺寸下缩小所有图像？
<!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>
最佳答案
只需将 max-width 添加到 #stage
#stage{
max-width: 100%;
}
并将!important 放入图像max-width
#stage img {
max-width: 100% !important
}
关于html - 如何使幻灯片图像在不同的视口(viewport)尺寸下按比例缩放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54058487/