gpt4 book ai didi

javascript - 调整幻灯片大小以填满屏幕

转载 作者:行者123 更新时间:2023-11-28 10:52:34 25 4
gpt4 key购买 nike

我正在构建一个带有自动幻灯片放映的摄影网站。

我正在尝试调整幻灯片放映的大小以适应浏览器,使其填满屏幕在上方或下方不留空白。如果屏幕的图像比例错误,我还需要它来放大图像(这样,如果用户使用的是 iPhone 等设备,图像仍会正确填满屏幕)。

请查看 this website举个例子。请注意,如果您将屏幕旋转 90 度,图像会缩放并保持居中以填满屏幕。

这是我目前拥有的(如果必须的话,我会更改幻灯片放映的方法)。

HTML + JavaScript(头部)

...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1500)
.next()
.fadeIn(1500)
.end()
.appendTo('#slideshow');
}, 5000);

});
</script>

</head>

<body>
<div id="slideshow">
<div>
<img src="images/slide1.jpg"/>
</div>
<div>
<img src="images/slide2.jpg"/>
</div>
<div>
<img src="images/slide3.jpg"/>
</div>
</div> <!-- end slideshow -->
</body>

CSS

#slideshow { 

position: relative;

width: 100%;

}

#slideshow > div {

position: absolute;

}

提前致谢,如果问题措辞不当或毫无意义,我们深表歉意。

基兰

最佳答案

不要让 div 绝对化,让 img 绝对化。那就是你出错的地方。
同时将图像设置为 100%,这样它就会占据整个屏幕

CSS:

body{
padding:0;//so that there is no white space
margin:0;
}
#slideshow {
display:block;
position: relative;
width: 100%;
}
#slideshow > div > img{
display:block;
width:100%;
max-width:100%;
position:absolute; // here make it absolute
}
#slideshow > div {
position:relative; // make it relative not necessary actually
}

JS FIDDLE DEMO

关于javascript - 调整幻灯片大小以填满屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22741334/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com