브라우저 창을 완전히 채우는 여러 열 이미지

브라우저 창의 너비를 포괄 할 수있는 많은 클릭 가능한 이미지가 있어야합니다. 그래서 양쪽 공간이 없습니다. 크기가 180x180 픽셀 인 경우 개별 이미지처럼 이상적이지만 크기가 더 간단하면 브라우저 창에 따라 크기를 변경할 수 있습니다. 그냥 공간을 채울 필요가 있습니다. 내가 div를 바디보다 더 크게 만드는 순간, 오른쪽에 공간 오버플로가 생깁니다. 그 말이 맞는다면.브라우저 창을 완전히 채우는 여러 열 이미지

이 내 코드는 다음과 같습니다 - 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/ –

브라우저 창을 완전히 채우는 여러 열 이미지

답변

관련 문제