在我的演示链接中，请旋转图像部分，查看图像超过问题。
当我在 chrome 浏览器中使用 css 过渡缩放效果时，溢出隐藏和边框半径不起作用。
它在 Mozilla Firefox 上运行良好，但 chrome 无法正常运行，我给出了溢出隐藏和边框半径，但悬停图像超出了图像区域。
如何解决这个问题。我尝试了很多时间，但我无法修复并且找不到正确的解决方案。
请点击演示
http://tcxsandbox.com/stack-overflow/
还检查第2条评论，我已经放置了小提琴链接。
【问题讨论】：
在使用 z-index 并在 child 之前声明 parent（边框半径和溢出隐藏）之后，您必须在相对位置声明父元素，并使用 absolute 声明子元素。示例：
<div class="parent">
<img class="child" src="yourimage.jpg" />
</div>
<style>
.parent{
/*must declare border radius and z-index*/
position: relative;
border-radius:100px;
z-index:5;
}
.parent img{ /*Child element*/
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out ;
transition: all .3s ease-in-out;
-webkit-transform: scale(1,1) ;
-moz-transform: scale(1,1);
transform: scale(1,1);
z-index:4; /*here's where magic happens*/
}
.parent img:hover{
img{
-webkit-transform: scale(1.1,1.1) ;
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
}
}
</style>
这应该可以。 注意：我建议为两个元素（父元素和子元素）声明边框半径，以防止出现交叉浏览问题。
【讨论】：
考虑下面的代码：
.box-main-img {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
【讨论】：
将 border-radius 添加到您的 box-main-img 类
.box-main-img {
float: left;
width: 100%;
overflow: hidden;
height: 143px;
border-radius: 5px;
}
【讨论】：