CSS - 图像缩放/避免拉伸和挤压

Question

我在一个网站中有一个部分，由八个图像组成，排列成两行，每行四个。每个图像外壳 - grid-item - 将包含具有不同原始尺寸的不同图像。不知何故，我需要在屏幕尺寸减小时避免任何类型的图像缩放。我已经尝试了很多方法来避免这种情况，但仍无法找到解决方案。我很确定尺寸是关键 - 我怎么能改变这个？

我尝试的最后一个解决方案是在此处跟随之前的Q＆amp; A中的这个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>

编辑更新 -

如果我使用height: auto使用不同的图像，则会发生这种情况（看起来很像砖石）

Answer 1

flexbox解决了您的问题

看看这个小提琴：https://jsfiddle.net/wgL6z2be/

希望它有所帮助！