Question

jsfiddle中的转载问题：https://jsfiddle.net/pj9gjc8d/

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

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

感谢您的帮助！

编辑：尝试更好的描述：当我在中间图像上盘旋时 - 在缩放过程中 - 存在某种错误的调整大小 - 片刻div更小并且旁边有像素空白以填充自由空间。 http://i.imgur.com/WtkXfiY.jpgTried

Answer 1

虽然我在Mac上使用Chrome（版本48.0.2564.116（64位））并且没有看到此问题，但我相信您的问题在于webkit的子像素呈现。

你会看到你的宽度分割是33.33333333% - 在某些情况下，这将导致一条线的一小部分。

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

https://css-tricks.com/percentage-bugs-in-webkit/

在您的特定情况下，可能会在这些33％宽度的div中使用全宽图像。

我会通过将米色背景色作为div本身的一部分而不是内部的图像来最小化这个问题。

Answer 2

我不知道为什么，但是当我将框的float更改为right时，它对我来说是固定的。

此外，您可以使用宽度calc(100% / 3)代替33.3333333…%。

Answer 3

与转换元素的微积分之间的差异相关的问题

在这里可以更容易看到

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

＆＃13;

.box {
  width: 33.3333333333333%;
  float: left;
  overflow: hidden;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: all 2s ease-in-out;
  }
  
.box:hover  img {
      transform: scale(1);
}

＆＃13;

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

＆＃13;

可以解决稍微增加div内图像的隐蔽性

＆＃13;

.box {
  width: 33.3333333333333%;
  width: calc(100% / 3);   /* just as a easier to read alternative */
  float: left;
  overflow: hidden;
}
img {
    display: block;
    max-width: 100.1%;   /* modified from 100% */
    height: auto;
    transition: all 0.2s ease-in-out;
  }
  
.box:hover  img {
      transform: scale(1.3);
}

＆＃13;

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

＆＃13;

真正的解决方案是将图像的宽度设置为略大于容器。你只需要大约半个像素，所以甚至可能低于100.1％。

我已将33.33％更改为更现代的表达方式，但这只是个人品味。

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

3 个答案: