Одним из решений было бы заключить ваше изображение в div, чтобы обрезать изображение в круг с border-radius: 50%
и overflow: hidden
.Затем поместите этот div в другой div, чтобы создать округленный цвет фона.Вот некоторые начальные HTML и CSS, и вы можете настроить цвет, отступы и радиус границы по своему вкусу.
HTML
<div class="img-container">
<div class="img_crop">
<img src="your-image" alt="Logo">
</div>
</div>
CSS
.img-container {
width: 300px;
padding: 40px;
background-color: blue;
border-radius: 130px;
}
.img_crop {
border-radius: 50%;
overflow: hidden;
}
img {
width: 100%;
}