在不離開視圖的情況下調整網格中的圖像

我想根據窗口的寬度和高度調整大小以適合網格中的圖像。它應該達到最大尺寸（這是最小的尺寸，無論是窗口高度還是寬度），同時保持寬高比。基本上，這樣圖像就像他們所能看到的一樣大，而不會離開視野。在不離開視圖的情況下調整網格中的圖像

我曾嘗試在CSS中使用組合最小和最大高度的小運氣。這裏是我使用的是現在的代碼：

CSS：

body { 
     width:100%; 
     height:100%; 
     margin:0; 
     padding:0; 
    } 

    #tileContainer { 
     width:95%; 
     height:90%; 
     margin:auto; 
     background-color:#0F3; 

     top:0; 
     bottom:0; 
     left:0; 
     right:0; 
     position:absolute; 
    } 

    .row { 
     display:inline-block; 
     width:100%; 
    } 

    .tileContainer { 
     height:16%; 
     width:20%; 
     float:left; 
    } 

    .tileImage { 
     width:100%; 
    }

HTML：

<body> 
<div id="tileContainer"> 
    <div class="row"> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
     <div class="tileContainer"> 
      <img class="tileImage" src="http://placehold.it/500x500/" /> 
     </div> 
    </div> 
    </div> 
</body>

來源

2014-01-29 block14

如果我正確理解您的問題，那麼這個解決方案可以用於工作您。

更新你的CSS這樣的：fiddle demo

.tileContainer { 
    height:16%; 
    width:20%; 
    min-width:75px; //set this to the smallest your want your images displayed at. 
    float:left; 
}

注意，一旦通過該窗口的大小上下足了你的形象將換到下一行設置min-width。

來源

2014-01-29 18:06:18 badAdviceGuy

我很難找出解釋我的問題的單詞。基本上，隨着視圖越來越小，圖像需要變得越來越小以適應它們。 – block14

@ block14，我已經看到你的例子小提琴中的行爲。你目前面臨什麼問題？ – badAdviceGuy

我的問題是當視圖的高度變得越來越小時，圖像就會出現在視野之外（變得越來越寬）。 – block14

在不離開視圖的情況下調整網格中的圖像

回答

相關問題