具有纯色圆形背景的图像

Question

我想在有彩色背景的容器中显示图像。

我希望容器的背景是圆形的，图像放在中心。

此外，在背景和图像的边界之间存在空间。

这就是目标：

img

到目前为止的代码：

.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
display: table-cell;
vertical-align: middle;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}

<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>

这就是我目前所取得的成就：

img

Answer 1

您需要删除display: table-cell规则，此外还可以缩小图像。

.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 150px;
width: 150px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
.img {
max-width: 50%;
max-height: 50%;
}

<div class="circle">
<img src="https://picsum.photos/100/100?grayscale" class="mx-auto d-block img">
<div class="title">
TITLE
</div>
</div>

Answer 2

请检查。

.container-box { 
width: 400px;
height: 400px;
background-color: black;

}
.container-circle {

display:inline-block;
margin: 50px;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: gray;
}
.image {
background: url(https://upload.wikimedia.org/wikipedia/commons/c/ce/Font_Awesome_5_solid_arrow-circle-right.svg);
width: 100px;
height: 100px;
display: inline-block;
margin: 100px;
}

<div class="container-box">
<div class="container-circle">
<div class="image">

</div>

</div>
</div>

`

Answer 3

如果我看对了，你希望图像是圆形的，而不是容器。在这种情况下，这应该会帮助你：

.circle img {
border-radius: 50%;
max-width: 100%;
}
.circle{
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
height:100px;
width: 100px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}

<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>