html - 隐藏的溢出在 CSS 网格图像中不起作用

Question

我一直在为“food_picture”类甚至图片网格容器类添加溢出隐藏，但是当图像悬停在其他图像之上时它们仍然会扩展。我只希望它们在固定尺寸内变换，而不是在悬停时溢出到其他图像中。

我还有一个问题，如果我在图像后面设置背景颜色或尝试添加图标，它会破坏网格布局并将图像扩展到它们的完整高度和宽度...

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

.food_title{
    max-width: 75vw;
    font-size: 3rem;
    text-transform: capitalize;
    margin-top: 5rem;
    padding: 3rem;
}

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


img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.food_picture:hover{
    transform: scale(1.1);
    opacity: .5;
    transition: all 1s linear;
}

.food_picture{
    overflow: hidden;
}


.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:600px){
    .picture_grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1rem;
    }
  }


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

    .picture_grid {
        grid-template-columns: 300px 300px 300px 300px;
        grid-template-rows: 500px 500px 500px 500px;
        grid-template-areas: "six six six seven"
                            "eight eight four seven"
                            "three three three two"
                            "one one five two";
                            grid-row-gap: 1rem;
                            grid-column-gap: 1rem;
    }

}

<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 元素的 width 和 height 属性。使用 object-fit 和 size 属性是多余的，因为 cover 会使图像适合其容器。

img{
    object-fit: cover;
}

这是您更新后的示例:

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

.food_title{
    max-width: 75vw;
    font-size: 3rem;
    text-transform: capitalize;
    margin-top: 5rem;
    padding: 3rem;
}

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


img{
    object-fit: cover;
}



.food_picture:hover{
    transform: scale(1.1);
    opacity: .5;
    transition: all 1s linear;
}

.food_picture{
    overflow: hidden;
    width: 100%;
    height: 100%;
}


.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:600px){
    .picture_grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1rem;
    }
  }


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

    .picture_grid {
        grid-template-columns: 300px 300px 300px 300px;
        grid-template-rows: 500px 500px 500px 500px;
        grid-template-areas: "six six six seven"
                            "eight eight four seven"
                            "three three three two"
                            "one one five two";
                            grid-row-gap: 1rem;
                            grid-column-gap: 1rem;
    }

}

<section class="our_work">
  <h2 class="food_title">Our Food</h2>
    <div class="picture_grid">
    <article class="food_picture pic_1">
      <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 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://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 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://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 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://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 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://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 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://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 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://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" 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://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="" class="food_picture_img">
      <a href="#" class="food_picture_icon" data-id="8">
      </a>
    </article>
  </div>
</section>