修复了液体布局图像100%宽度和高度的滚动问题

Question

我在我的网站上使用液体布局。背景是一张图片（幻灯片），它按照我想要的方式工作。照片会根据浏览器的大小进行拉伸和调整大小。

然而，我只是注意到，当我将浏览器窗口移动到尽可能薄或窄的位置时，图像仍然存在，但当我向右滚动时，图像会切换到背景中。但全尺寸的效果很好。

基本上，我希望它在任何时候都是100%的宽度和高度，永远不要水平滚动或暴露身体。

请让我知道你还需要知道什么才能提供帮助。这是html和css。感谢

#revolver {
 background-color:#ccc;
 width:100%;
 min-height:100%;
 z-index:10001;
}
.revolver-slide {
 width:100%;
 min-height:100%;
 background-position:center center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
.revolver-slide img {
 width:100%;
 min-height:100%;
}
.page-section {
 width:100%;
 height:100%;
 margin:0px auto 0px auto;
}
html,body {
 height:100%;
}
<div class="page-section clear">
<!-- 100% width -->
        <div id="revolver">
            <div class="revolver-slide" style="background-image:url('<?php bloginfo('template_directory');?>/img/slides/slide-6.jpg');"></div>
            <div class="revolver-slide" style="background-image:url('<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg');"></div>
            <div class="revolver-slide" style="background-image:url('<?php bloginfo('template_directory');?>/img/slides/slide-8.jpg');"></div>
            <div class="revolver-slide" style="background-image:url('<?php bloginfo('template_directory');?>/img/slides/slide-11.jpg');"></div>
            <div class="revolver-slide" style="background-image:url('<?php bloginfo('template_directory');?>/img/slides/slide-7.jpg');"></div>
            <div class="revolver-slide" style="background-image:url('<?php bloginfo('template_directory');?>/img/slides/slide-4.jpg');"></div>
            <div class="revolver-slide" style="background-image:url('<?php bloginfo('template_directory');?>/img/slides/slide-9.jpg');"></div>
        </div>

</div>

Answer 1

我想明白了。我把overflow-x:hidden放在我的页面分区div上，然后进入