瀏覽器重新調整圖像網格大小？

Question

我有這個純CSS圖像網格，我希望改進，使其更能響應瀏覽器窗口大小。列和行目前是固定的，這意味着當您縮小瀏覽器窗口時，列將被壓扁，在這種情況下理想的情況是切換到更少的列和更多的行以最小化圖像裁剪（因爲圖像最初是以風景爲導向的）。

HTML結構：

<div class='padding'> 
    <div class='column'> 
     <div class='row'> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
     </div> 
     <div class='row'> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
     </div> 
     <div class='row'> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
     </div> 
    </div> 
    <div class='column'> 
     <div class='row'> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
     </div> 
     <div class='row'> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
     </div> 
     <div class='row'> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
      </div> 
      <div class='thumb'> 
       <div class='image' style='background-image:url(URL)'></div> 
     </div> 
    </div> 
</div> 

CSS：

.padding { 
    position:absolute; 
    top:8px; 
    right:8px; 
    bottom:8px; 
    left:8px; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
} 

.column { 
    position:relative; 
    float:left; 
    width:50%; 
    height:100%; 
} 

.row { 
    position:relative; 
    display:flex; 
    display:-webkit-flex; 
    display:-o-flex; 
    display:-moz-flex; 
    display:-ms-flexbox; 
    width:100%; 
    height:calc(100%/3); 
} 

.thumb { 
    position:relative; 
    width:100%; 
    margin-top:8px; 
    margin-right:8px; 
    margin-left:8px; 
    margin-bottom:8px; 
    overflow:hidden; 
} 

.image { 
    position:absolute; 
    top:0px; 
    right:0px; 
    bottom:0px; 
    left:0px; 
    background-size:cover; 
    background-position:center; 
} 

這裏有一個的jsfiddle：https://jsfiddle.net/xybosmzm/

我不知道從哪裏開始，但我想我會需要使用一些javascript/jquery來做到這一點？

Answer 1

你需要什麼叫media queries你可以閱讀更多關於它here，它看起來像這樣加時：

.column { 
    width:100% 
} 

@media screen and (min-width:470px) { 
    .column { 
    width:50%; 
    } 
} 

的@media將讓這個當屏幕至少470px廣列將爲50%屏幕寬度，否則將佔用整個屏幕width:100%。

這是一個非常簡單的example嘗試調整屏幕，你會，在一個點的圖像將從4連續倒塌2