Html CSS缩放响应图像时的不必要行为

JSFIDLE中重现的问题：

HTML：
SCSS：
.盒子{
宽度：33.3333%；
浮动：左；
溢出：隐藏；
img{
显示：块；
最大宽度：100%；
高度：自动；
转换：所有.2易入易出；
}
&：悬停{
img{
转换：比例（1.3）；
}
}
}

基本上，我需要的是通过CSS缩放来消除不必要的行为。在Google Chrome中将中间图像悬停在右侧时，可以看到这个问题。Div似乎被错误地缩放到其原始比例

谢谢你的帮助

---

编辑：尝试更好的描述：当我在中间图像上悬停时-在缩放过程中-出现了某种错误的调整大小-一瞬间div变小了，旁边有像素空白来填充可用空间

当我在Mac上使用Chrome（48.0.2564.116版（64位））时，没有发现这个问题，我相信你的问题在于webkit的亚像素渲染

您将看到宽度的划分为

33.33333333%

——在某些情况下，这将导致一行的一小部分

同样，这更多的是一个浏览器问题，所以我不会太担心它，因为这将是未来浏览器能够解决的问题

在您的特定情况下，这可能与在这些33%宽度div中使用全宽图像有关

---

我会将米色背景颜色作为div本身的一部分，而不是div内部的图像，从而最大限度地减少这个问题。

我不知道为什么，但当我将框的

浮动设置为
右侧时，它对我来说是固定的

此外，您可以使用
calc（100%/3）
的宽度，而不是
33.3333333…%
这是一个与转换元素的演算之间的差异有关的问题

在这里更容易看到

我已删除缩放，因此图像应保持不变。但在某些情况下，它失败了。（在这里更容易看到）


.box{
宽度：33.3333%；
浮动：左；
溢出：隐藏；
}
img{
显示：块；
最大宽度：100%；
高度：自动；
过渡：所有2个易于输入输出；
}
.box：悬停img{
变换：比例（1）；
}

到底哪里出了问题，“可以看到问题”并没有真正的帮助。我在Safari中得到了一条白色的垂直线，但在Chrome中没有。当我在中间图像上悬停时——在缩放过程中——出现了某种错误的调整大小——有一段时间div变小了，旁边有像素空白来填充空闲空间。我试着在这里捕捉它，我在Safari中得到了像素白色，但不是Chrome。你使用的是哪种操作系统？我使用的是Windows 10，64位，我在所有分辨率下都没有像素空白，但我真的不想在任何地方使用它。谢谢你的回答，关于“我会尽量减少这个问题，将米色背景色作为div本身的一部分，而不是其中的图像。”-那太好了，但这些只是示例占位符。不幸的是，我在出现问题的地方使用普通的照片。。同样的问题，很高兴它有帮助！
HTML:
 <div class="box zoomable-box">
    <img src="http://i.imgur.com/O8xteuL.jpg" alt="">
 </div>

 <div class="box zoomable-box">
    <img src="http://i.imgur.com/O8xteuL.jpg" alt="">
 </div>

 <div class="box zoomable-box">
    <img src="http://i.imgur.com/O8xteuL.jpg" alt="">
 </div>

SCSS:
.box {
  width: 33.3333333333333%;
  float: left;
  overflow: hidden;

  img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: all .2s ease-in-out;
  }

  &:hover {
    img {
      transform: scale(1.3);
    }
  }
}