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

Question

我在一个网站中有一个部分，其中包含八张图片，每行四张。每个图像外壳 - grid-item - 将包含具有不同原始尺寸的不同图像。当屏幕尺寸减小时，我需要以某种方式避免任何类型的图像缩放。我尝试了很多方法来避免这种情况，但仍然找不到解决方案。我很确定尺寸是关键——我该如何改变呢？

我尝试的最后一个解决方案是遵循此处先前问答中的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/

希望对你有帮助！