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

Question

我在我的网站上使用流式布局。背景是一张图片(幻灯片)，它按我想要的方式工作。照片会随着浏览器的大小而拉伸(stretch)和调整大小。

但是，我刚刚注意到，当我将浏览器窗口尽可能地变窄或变窄时，图像仍然存在，但当我向右滚动时，图像会切入背景。但全尺寸效果很好。

基本上我希望它始终是 100% 的宽度和高度，永远不要水平滚动或永远不会暴露 body 。

请让我知道您还需要知道什么来提供帮助。这是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 和 presto