0

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

但是，我刚刚注意到，当我将浏览器窗口移动到尽可能薄或窄时，图像仍然存在，但是当我向右滚动时，图像会切入背景。但全尺寸工作正常。

基本上我希望它始终保持 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>
4

1 回答 1

0

我想到了。我把overflow-x:hidden我的页面部分 div 和 presto

于 2013-09-01T21:43:18.240 回答