Исправить проблемы прокрутки с жидкостным макетом 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 и presto