Question

我仅使用html，css（flexbox）制作图片库。问题是，当我在图像上使用object-fit: cover属性时，鼠标悬停时div内的图像会晃动。

<!-- language: lang-css-->
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    img {
      width: 250px;
      height: 200px;
      **object-fit: cover;**
    }

    .header {
      font-family: 'Kaushan Script', cursive;
    }

    .wrapper {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .img-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 70vw;
      align-items: center;
    }

    .img-sqr {
      box-shadow: 0px 0px 10px #ccc;
      margin: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      transition: all 0.2s;
      padding: 20px;
    }

    .img-sqr:hover {
      box-shadow: 3px 3px 5px 3px #ccc;
      transform: scale(1.03);
    }

    .img-sqr span {
      font-family: 'Sigmar One', cursive;
    }

<body>
  <div class="wrapper">
    <div class="header">
      <h1>Collections</h1>
    </div>
    <div class="img-gallery">


      <div class="img-sqr" id="sqr5">
        <div class="img-div"><img src="images/converse-upsidedown.jpg" alt="" class="img"></div>
        <span class="name">Upsidedown</span>
      </div>
      <div class="img-sqr" id="sqr6">
        <div class="img-div"><img src="images/food-unsplash.jpg" alt="" class="img"></div>
        <span class="name">Food</span>
      </div>
      <div class="img-sqr" id="sqr7">
        <div class="img-div"><img src="images/friendshipunsplash.jpg" alt="" class="img"></div>
        <span class="name">Friendship</span>
      </div>
      <div class="img-sqr" id="sqr8">
        <div class="img-div"><img src="images/hot-air-baloons-outdoor.jpg" alt="" class="img"></div>
        <span class="name">Outdoor</span>
      </div>
      <div class="img-sqr" id="sqr12">
        <div class="img-div"><img src="images/reflectionunsplash.jpg" alt="" class="img"></div>
        <span class="name">Reflection</span>
      </div>
    </div>
  </div>
</body>

Answer 1

尝试以不同的方式运行您的代码，并且没有看到图像闪烁/抖动。闪烁/抖动可能是由于悬停前后图像的纵横比不同。如下添加object-fit: cover到CSS悬停可能会解决您的问题。

.img-sqr:hover {
      box-shadow: 3px 3px 5px 3px #ccc;
      transform: scale(1.03);
      object-fit: cover;
    }

您可以了解有关适合对象的CSS属性here的更多信息。

Answer 2

从img-sqr：hover删除变换属性

当我将鼠标悬停在图像div上时，为什么图像会抖动

2 个答案: