图片将无法拉伸以适合网格/列

Question

我试图弄清楚为什么图像不能拉伸到适合我设置的列和宽度的原因。您可以从图片中看到很多空白。我尝试了适合对象的方法：Cover可以很好地与背景图像配合使用，但是我不知道如何在这里使用它。似乎如果图像在垂直方向上较大，则似乎无法在几列上水平放置图像，反之亦然。但是，我正在努力在4x4网格中实现布局，在该网格中，我已经按照希望的方式设置了网格模板区域。

我要实现的是此图像，或者至少要了解为什么我无法在图像上获得这种拉伸效果，因此我可以根据自己的喜好自定义网格，甚至将图像尺寸设置为完全相同，并且没有任何设置已经改变。尽管网格模板列和行都重复了（4,1fr），但网格的宽度和高度似乎与我的不同。

.picture_grid{
    max-width: 90vw;
    margin:2rem auto;
}

.food_title{
    font-size: 3rem;
    text-transform: capitalize;
    padding: 6rem;
}

.food_title:after{
    content: "";
    display: block;
    margin-top: 1rem;
    background: #F4D06F;
    width: 15rem;
    height: 0.25rem;;
}

img{max-width:80%;
    height:auto}

.food_picture{
    width: 100%;
    height: auto;
    display: block;
}



.pic_1{
    grid-area: one;
}

.pic_2{
    grid-area: two;
}
.pic_3{
    grid-area: three;
}

.pic_4{
    grid-area: four;
}

.pic_5{
    grid-area: five;
}

.pic_6{
    grid-area: six;
}

.pic_7{
    grid-area: seven;
}

.pic_8{
    grid-area: eight;
}


@media screen and (min-width:768px) {
    .picture_grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

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

    .picture_grid {
        height: 100vh;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(4,1fr);
  grid-template-areas: 
  "one one two three"
  "one one four four"
  "five six seven seven"
  "eight nine seven seven"
    }

  }

<section class="our_work">
<h2 class="food_title">Our Food</h2>

<div class="picture_grid">
<article class="food_picture pic_1">
  <img src="img/food_1.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="1">
  </a>
</article>

<article class="food_picture pic_2">
  <img src="img/food_2.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="2">
  </a>
</article>

<article class="food_picture pic_3">
  <img src="img/food_3.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="3">
  </a>
</article>

<article class="food_picture pic_4">
  <img src="img/food_4.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="4">
  </a>
</article>

<article class="food_picture pic_5">
  <img src="img/food_5.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="5">
  </a>
</article>

<article class="food_picture pic_6">
  <img src="img/food_6.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="6">
  </a>
</article>

<article class="food_picture pic_7">
  <img src="img/food_7.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="7">
  </a>
</article>

<article class="food_picture pic_8">
  <img src="img/food_8.jpg" alt="" class="food_picture_img">
  <a href="#" class="food_picture_icon" data-id="8">
  </a>
</article>

</div>

</section>

Answer 1

为什么要设置img{max-width:80%; ...？不确定我是否正确理解了您的预期目标，但是如果将图像的width和height都设置为100%，则图像会被拉伸...可能看起来并不理想。奇怪（如果您没有按正确的比例裁剪它们）。另一种选择是将它们设置为background-image并使用background-size: cover，然后它们将被浏览器“裁剪”，但仍保持比例。

PS：编辑了断点，以便我们可以在摘要结果中直接在此处

* {
    box-sizing: border-box;
}
.picture_grid {
    max-width: 90vw;
    margin: 2rem auto;
}

.food_title {
    font-size: 3rem;
    text-transform: capitalize;
    padding: 6rem;
}
.food_title:after {
    content: "";
    display: block;
    margin-top: 1rem;
    background: #F4D06F;
    width: 15rem;
    height: 0.25rem;
}

img {
    display: block;
    width: 100%;
    height: 100%;
    outline: 1px solid gray;
}

.food_picture {
    height: auto;
    display: block;
}

.pic_1 {
    grid-area: one;
}

.pic_2 {
    grid-area: two;
}
.pic_3 {
    grid-area: three;
}

.pic_4 {
    grid-area: four;
}

.pic_5 {
    grid-area: five;
}

.pic_6 {
    grid-area: six;
}

.pic_7 {
    grid-area: seven;
}

.pic_8 {
    grid-area: eight;
}
@media screen and (min-width:320px) {
    .picture_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (min-width:600px) {

    .picture_grid {
        height: 100vh;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(4,1fr);
        grid-template-areas: "one one two three" "one one four four" "five six seven seven" "eight nine seven seven";
    }

}

<section class="our_work">
	<h2 class="food_title">Our Food</h2>
	
	<div class="picture_grid">
		<article class="food_picture pic_1">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="1">
			</a>
		</article>
		
		<article class="food_picture pic_2">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="2">
			</a>
		</article>
		
		<article class="food_picture pic_3">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="3">
			</a>
		</article>
		
		<article class="food_picture pic_4">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="4">
			</a>
		</article>
		
		<article class="food_picture pic_5">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="5">
			</a>
		</article>
		
		<article class="food_picture pic_6">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="6">
			</a>
		</article>
		
		<article class="food_picture pic_7">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="7">
			</a>
		</article>
		
		<article class="food_picture pic_8">
			<img src="https://via.placeholder.com/800x600" alt="" class="food_picture_img">
			<a href="#" class="food_picture_icon" data-id="8">
			</a>
		</article>
		
	</div>
	
</section>