完全填充瀏覽器窗口的多個列圖像

我希望有很多可點擊的圖像來覆蓋瀏覽器窗口的寬度。所以沒有空間。理想情況下，像單個圖像一樣保持180x180px的大小，但如果更容易，它們可以根據瀏覽器窗口更改大小。只需要填充空間。目前，如果我使包含的div大於body，它會在右側創建一個空間溢出。如果這是有道理的。完全填充瀏覽器窗口的多個列圖像

這是我的代碼： - http://jsfiddle.net/ZPTBB/

這是我怎麼想它看起來： - http://www.karen.hunter.myzen.co.uk/pinewood/image_so.jpg

也許它需要查詢????

非常感謝您的幫助。

我的代碼： -

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
      <title>Untitled Document</title> 
      <style> 
      /* Editable Multiple Image Area */ 
      .image-container {width:100%; margin:0; padding:0; height:360px; overflow:hidden;} 
      .image{position:relative;float:left;width:188px;height:188px; margin:0; padding:0;} 
      .image img {position:absolute;z-index:1;left:0;top:0;} 
      .image:hover div {display:block!important; } 
      .image img:hover div {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;} 
      .hoverimg {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;} 
      </style> 
      </head> 

      <body> 
      <!-- IMAGE CONTAINER --> 
        <div class="image-container"> 
         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 


         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 

         <div class="image"> 
          <img src="http://www.placehold.it/188x188" /> 
          <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div> 
         </div> 
        </div><!-- IMAGE CONTAINER --> 
      </body> 
      </html>

來源

2013-10-25 karen Hunter

https://www.mozilla.org/en-US/about/?icn=t abz - 你在找這樣的東西嗎？ – Nitesh

添加一個可容納溢出的圖像一些額外的容器：

.image-container { 
    width:100%; 
    height:360px; 
    overflow:hidden; 
} 
.image-container-overflow { 
    width: 100%; 
    padding-right:187px; /* assuming 188px width for image */ 
    height: 360px; 
    position: relative; 
} 
.image-container-actual { 
    width: 100%; 
    height: 360px; 
    position: absolute; 
    top: 0; 
    left: 0 
}

第一需要100％通過填充+ 187px，未來這個總佔用通過絕對定位

http://jsfiddle.net/willemvb/pq26W/

來源

2013-10-25 09:08:38

你是個天才！非常感謝。我如何讓他們響應，所以他們擴大與瀏覽器？ –

您可以使用具有填充和框大小的響應技巧來創建響應容器。 http://jsfiddle.net/willemvb/xNdzz/1/ –

完全填充瀏覽器窗口的多個列圖像

回答

相關問題