chrome和safari中的图像缩放错误答案

【问题标题】：Image scaling error in chrome and safarichrome和safari中的图像缩放错误
【发布时间】：2015-04-27 06:54:25
【问题描述】：

在我的网页中，我有一个边框半径为 50% 的 div；在那个 div 里面我添加了一个图像，当悬停在那个图像上时，它会缩放到 1.2。这个东西在Mozilla中正常工作，但是当我谈到chrome和safari时，图像通过溢出它而不是圆形div（边界半径：50％）来缩放，为什么会发生这种情况。有什么方法可以解决这个问题吗？

代码

HTML

<div class="work-round">
  <img src="images/latestwork_01.png">
</div>

CSS

.work-round {
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 10px auto;
    max-height: 250px;
    overflow: hidden;
    width: 250px;
}

.work-round img {
    background: none repeat scroll 0 0 #fff;
    height: 100%;
    min-height: 240px;
    transition: all 0.5s ease-out 0s;
    width: 350px;
}
.work-round img:hover {
    opacity: 0.9;
    transform: scale(1.2);
}

fiddled here

悬停屏幕截图

【问题讨论】：

标签： jquery css google-chrome safari transform

【解决方案1】：

nickspiel 在此处找到的解决方案：css3 border radius animation transition in safari not working

见： https://jsfiddle.net/KyleKatarn/s0bpp0ho/6/

.work-round {
    -webkit-mask-image: -webkit-radial-gradient(white, black);

要在 Safari 上获得部分支持： https://jsfiddle.net/KyleKatarn/s0bpp0ho/7/

【讨论】：

新的在 Chrome 上测试正常
在 chrome 中工作，部分在 safari 中工作，外部 div 的边框与图像重叠。我能解决吗？
哼，我能做到的最好的：jsfiddle.net/s0bpp0ho/7 也看到这个帖子：stackoverflow.com/questions/17202128/…
无论如何这是最有效的答案，谢谢老兄:)

【解决方案2】：

这是一种解决方案（在 Chrome 上测试）

*{

    background:red;
}
.work-round {
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 10px auto;
    max-height:250px;
    overflow:hidden;
    width:250px;
    transition: all 2s linear;    
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);


}

.work-round img {
        background: none repeat scroll 0 0 #fff;
    height: 100%;
    min-height: 240px;
    transition: all 0.5s ease-out 0s;
    width: 350px;

    -webkit-border-radius: 500px;width:100%;height:100%;

}
.work-round img:hover {
    opacity: 0.9;
    -webkit-transform:scale(1.2);
}

【讨论】：

【解决方案3】：

我编辑了你的代码查看结果here

it chrome BUG 带有缩放和溢出。

对于具有 (overflow:hidden) 的容器添加（在你的情况下它是 .work-round ）

position:relative;
z-index:1;

【讨论】：