Как закруглить задний фон и не задеть картинку?

Question

[OwOshka]

Всем привет, нужна помощь закруглить фон картинки, при этом не задеть саму картинку.
Как должно быть:
Как у меня:
Код:

.card-options>img {
    object-fit: cover;
    max-width: 14px;
    height: 100%;
    padding: 12px;
    background: #F5F5F5;
    border-radius: 100%;
}

Возможно ли это сделать и как?

Comments

[Ankhena]

Шепотом: это вообще не img, это фоны или псевдоэлементы.

Answer 1

[OwOshka]

Нашел решение, img можно запихнуть в div и уже изменять сам div

.card-options>div {
    max-width: 14px;
    max-height: 14px;
    background: #F5F5F5;
    border-radius: 100%;
    padding: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.card-options>div>img {
    height: 100%;
    height: 100%;
}

Answer 2

[ForSureN1]

Дело в том что у вас для изображений стоит свойство object-fit: cover; данное свойство определяет изображение без потери размеров, занимая заданные вами размеры, в нашем случае max-width: 14px; height: 100%;
попробуйте заменить cover на contain и поделиться результатом

Comments

[OwOshka]

Тот же результат

[ForSureN1]

OwOshka, песочницу с кодом в студию, а еще, попробуйте убрать padding у изображения