javascript - Chrome:缩放图像可在增加分辨率的同时打破外部div的溢出

我确实有一个图像包装器，当它被悬停时，它应该隐藏图像的溢出。我确实在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);
}

最佳答案

您的浏览器可能已在Chrome中放大，这就是它在Fiddle中起作用的原因。您可以缩放小提琴以查看其破裂。尝试Ctrl +或Ctrl -将其恢复为100％。

关于javascript - Chrome:缩放图像可在增加分辨率的同时打破外部div的溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39308758/