Question

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

我正在尝试制作它，以便幻灯片调整大小以适应浏览器，以便填充屏幕不会在上方或下方留下空白区域。如果屏幕的图像比例错误，我还需要它来放大图像（这样如果用户在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; 

}

提前致谢，如果这是一个措辞严厉的问题，或者没有任何意义，请对不起。

基兰

Answer 1

不要让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

调整幻灯片大小以填充屏幕

1 个答案: