Question

当我将鼠标悬停在图像上时，我正在使用此图像缩放转换。它有时看起来很完美，有时它会在缩放后稍微移动一下。我无法弄清楚为什么......

任何人都可以帮助我解决为什么会发生这种情况

＆＃13;

    header {
            width: 65.277777777777778%;
            max-width: 1400px;
            margin: 0 auto;
            overflow: auto;
            margin-bottom: 6%;
        }
        
        .container {
            position: relative;
            overflow: hidden;
            /* height: 200px;
            width: 200px; */
            width: 100%;
        }
        
        .container img {
            position: relative;
            height: 100%;
            width: 100%;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: transform;
            transition: transform;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            display: flex;
        }
        
        .container:hover img {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: transform;
            transition: transform;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
        }

＆＃13;

<header>

        <div class="container">
            <img src="https://pixabay.com/static/uploads/photo/2016/08/11/08/43/potatoes-1585060__340.jpg" alt="" />
        </div>

    </header>

＆＃13;

Answer 1

尝试一下，看看它是否更适合您。它对我很有用，而且在它实施的几个月里我没有注意到任何问题：

.container img {
-webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}

.container img:hover {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

看看这是否有效，如果它是你感兴趣的东西。无论哪种方式，请告诉我！

图像悬停缩放过渡的问题

1 个答案: