javascript - Chrome : Scaling image makes it break the overflow of outer div while increasing

Question

我确实有一个图像包装器，它应该在鼠标悬停时隐藏图像的溢出。我确实在 Firefox 和 Opera 中测试过它工作正常，但在 Chrome 中它看起来有点奇怪。

我进行了 10 秒的屏幕转换以显示当前行为。
链接是https://vid.me/sx0h

我也在 JSFiddle中测试过 它实际工作正常的地方:

CSS 代码:

.carousel-cell {
  padding: 40px;
}

.carousel img {
  display: block;
  height: calc((100vh / 1.6) - 34px);
}

.carousel {
  margin-top: calc((100vh / 1.6) - (50vh - 57px));
}

.portfolioHover {
  overflow: hidden;
}

.portfolioHover img {
  -webkit-transition : 20s ease;
  -moz-transition : 20s ease;
  -ms-transition : 20s ease;
  transition: 20s ease;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.carousel-cell {
  overflow: hidden;
}

.carousel-cell:hover .portfolioHover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

Answer 1

您的浏览器可能在 Chrome 中放大了，这就是它在 Fiddle 中工作的原因。您可以缩放 Fiddle 以查看它是否损坏。尝试 Ctrl + 或 Ctrl - 将其恢复到 100%。