带有边框半径的填充与内部图像重叠

Question

我有一个<img>，我给它一个background-color，一个padding和一个border-radius。

问题是，即使我有一个填充，所以内部图像和框的边缘之间有很多空间，border-radius显然也会应用于内部的图像，因此导致内部图像的边缘被切断。下面是它的样子： https://i.stack.imgur.com/tYKfh.png

.element img {
padding: 25px;
border-radius: 50%;
background-color: #6e4fff;
height: 30px;
width: 30px;
}

<div class="element">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>

Answer 1

将样式移动到父元素，取出填充，并使用弹性框居中：

.valueelement {
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.valueelement img{
height: 30px;
}

<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>

Answer 2

另一种解决方案：

.valueelement img {	
height: 30px;
margin: 0 auto;
display: block;
}
.valueelement {
padding: 25px;
background-color: #6e4fff;
border-radius: 50%;
overflow: hidden;
height: 30px;
width: 30px;
}

<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>

Answer 3

在结合display:block和position:absolute定位图像时，只需使用calc方法即可。公式： calc(50% - imageWidth/2(，然后对高度执行相同的操作。

JsFiddle： https://jsfiddle.net/h867qgcL/

.valueelement {
position:relative;
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
min-width:80px;
width:80px;
}
.valueelement img {
position: absolute;
padding:0;
display:block;
margin-left:calc(50% - 13px);
margin-top:calc(50% - 15px);
height:30px;
}

<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png"/>
</div>