CSS - 圖像縮放/避免拉伸和壓扁

我在網站上有一個部分，它由八個圖像排列成兩排四個。每個圖像外殼 - grid-item - 將包含具有不同原始尺寸的不同圖像。不管怎樣，我需要在屏幕尺寸縮小時避免對圖像進行任何縮放。我試過很多方法來避免這種情況，但仍然找不到解決方案。我很確定這些尺寸是關鍵 - 我如何改變這一點？CSS - 圖像縮放/避免拉伸和壓扁

最後的解決方案，我試過是遵循這一fiddle從之前常見&一個在這裏，但這隻適用於如果我改變高度統治（其中，最終則扭曲圖像排列）。

我也看了磚石但同樣，高度規則不起作用。

下面的代碼，因爲我有它的時刻（對於這個問題的利益，我用於每個grid-item同一個圖像文件） -

.grid-container { 
 
    display: grid; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    grid-auto-rows: 100px; 
 
    grid-gap: 10px; 
 
    width: auto; 
 
    height: auto; 
 
    margin: 3em; 
 
} 
 

 
#block1 { 
 
    grid-row: span 4; 
 
    
 
} 
 

 

 

 
.grid-item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: auto; 
 
    height: auto; 
 
    
 
} 
 

 
.grid-item img { 
 
    width: 100%; 
 
    height: 100%; 
 

 
} 
 

 

 
/* RWD */ 
 

 
@media only screen and (min-width: 320px) { 
 

 

 
     .grid-container { 
 
     -moz-column-count: 1; 
 
     -webkit-column-count: 1; 
 
     grid-template-columns: repeat(1, 1fr); 
 
    } 
 

 
     #block1 { 
 
      grid-row: span 2; 
 
    
 
      } 
 

 
    
 
} 
 

 

 

 

 
    
 

 
@media only screen and (min-width: 560px) and (max-width: 960px) { 
 
    
 
      .grid-container { 
 
     -moz-column-count: 2; 
 
     -webkit-column-count: 2; 
 
     grid-template-columns: repeat(2, 1fr); 
 
    } 
 

 
     #block1 { 
 
      grid-row: span 2; 
 
    
 
      } 
 

 
} 
 

 

 

 

 
@media only screen and (min-width: 960px) and (max-width: 1300px) { 
 

 
    .grid-container { 
 
     -moz-column-count: 3; 
 
     -webkit-column-count: 3; 
 
     grid-template-columns: repeat(3, 1fr); 
 
    } 
 

 
     #block1 { 
 
      grid-row: span 3; 
 
    
 
      } 
 
    
 

 
} 
 

 

 
@media only screen and (min-width: 1300px) { 
 
    .grid-container { 
 
     -moz-column-count: 4; 
 
     -webkit-column-count: 4; 
 
     grid-template-columns: repeat(4, 1fr); 
 
    } 
 

 
      #block1 { 
 
       grid-row: span 4; 
 
    
 
     } 
 
    
 
}

<div class="grid-container"> 
 
     <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
     <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
    <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
    <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
    <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
    <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
    <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
    <div class="grid-item" id="block1"> 
 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">  
 
     </div> 
 
</div>

編輯UPDATE -

如果我與height: auto使用不同的圖像，那麼這就是發生了什麼（看起來很像石工）