border-radius在带有padding和border的div中的Safari中无法使图像变为圆形

Question

我有一个<div> img <div>里面有一个img 。

结构如下：

<div class="gift">
    <img>
</div>

div具有以下CSS：

display: inline-block;
overflow: hidden;
width: auto;
vertical-align: middle;
position: relative;
border-radius: 50em;

该图像具有以下CSS：

border: 1px solid 
rgba(46, 46, 46, 0.1);
border-radius: 50em;
padding: 3px;
min-height: 10em;
height: 10em;

在Safari中，它看起来像1 ：

但是，在Chrome中看起来应该是2 ：

关于如何在Safari中以与在Chrome中相同的方式显示图片的任何建议？

Answer 1

基本上是通过给img这个CSS来解决的：

img{
    border-radius: 50em;
    min-height: 10em;
    height: 10em;
    width: 10em;
    min-width: 10em;
}

并给div这个CSS：

div.gift{
    overflow: hidden;
    min-height: 10em;
    height: 10em;
    width: 10em;
    min-width: 10em;
    border: 1px solid rgba(46, 46, 46, 0.1);
    padding: 3px;
    border-radius: 50em;
}

边界半径值并不重要，只要它大于获得圆弧的高度和宽度值即可。

Answer 2

我通过使用具有圆形边框和50％半径的圆形PNG图像克服了这个问题。