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使用不同的图像，那么这就是发生了什么（看起来很像石工）