javascript - CSS - 图像缩放/避免拉伸(stretch)和挤压

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 解决了你的问题

看看这个 fiddle :https://jsfiddle.net/wgL6z2be/

希望对您有所帮助!