图像悬停缩放过渡的问题答案

【问题标题】：Problems with image hover zoom transition图像悬停缩放过渡的问题
【发布时间】：2017-12-01 02:14:08
【问题描述】：

当我将鼠标悬停在图像上时，我正在使用此图像缩放过渡。有时它似乎工作得很好，有时它在缩放后会移动一点。我就是想不通。。

谁能帮我看看为什么会这样

    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;
        }

<header>

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

    </header>

【问题讨论】：

在 windows 8.1 上的 chrome 58 中运行良好
有时有效，有时无效..（刷新）
刚刚刷新了五次，每次都有效。
如果您在其他代码编辑器中尝试代码而不是来自堆栈溢出，那就太好了:)

标签： html css hover css-transitions

【解决方案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);
}

看看这是否有用，如果它是你感兴趣的东西。无论哪种方式，让我知道！

【讨论】：