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和presto

上

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

1 个答案: