0

我正在使用 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>
4

2 回答 2

1

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

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

您可以在此处阅读有关 object-fit CSS 属性的更多信息。

于 2020-02-01T09:40:45.817 回答
-1

从 img-sqr:hover 中删除变换属性

于 2020-02-01T06:06:40.137 回答