完全填充浏览器窗口的多个列图像

我希望有很多可点击的图像来覆盖浏览器窗口的宽度。所以没有空间。理想情况下，像单个图像一样保持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/ –

完全填充浏览器窗口的多个列图像

回答

相关问题