css - Opera、边界半径和溢出 :hidden

Question

我有以下问题:jsfiddle .

从示例中可以看出，Opera(版本 12.16)不会剪裁位于 div 内的图像的边框。它返回一个带有圆 Angular 的 div，但无法 overflow hidden 的图像 Angular 。在其他浏览器中没有这样的问题仍然存在。我的代码:

<div style="overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black;">
    <img src="http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg" style=" width:200px; height:200px; ">
</div>

有办法解决吗？

Answer 1

这是一个错误，在 Opera 12.16 及更低版本中无法将图像的 Angular 包裹在包装器 div 中。

可以通过给父(包装器)div 相对定位，将图像附加为背景图像并使用其顶部和左侧坐标对其进行定位来解决。

如果图片很大，应该使用它的 background-size 属性调整它的大小。

这是更新后的 jsfiddle 链接:jsfiddle

<div style="position:relative; overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black; background-image:url(http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg); background-size:200px 200px;"></div>