Задать вопрос
Emptyform
@Emptyform

Как правильно сверстать отображение картинки (аватара) в круге?

Пытаюсь придумать правильную, универсальную верстку для отображения картинки в круге.
Проблема в том что картинки могут быть узкими и широкими. Соответственно, картинка у меня обрезается либо снизу либо сбоку.
Универсальным вариантом у меня получается лишь через background-image
Но этот вариант не совсем семантичен. Если не сказать совсем не семантичен.
Короче, вот тут мои варианты: https://jsfiddle.net/Talker/cL12zgx5/

Вопрос - есть ли способ решить это без background-image, а посредством нормального img ?
  • Вопрос задан
  • 1141 просмотр
Подписаться 2 Простой 2 комментария
Решения вопроса 1
vetero4eg
@vetero4eg
Frontend
ориентируясь на ваш пример я бы сделала картинки как положено картинками и
ваш контейнер
.img-cover {
-display: inline-block;
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
}
картинка img внутри него
img {
width: 100%;
height: auto;
object-fit: cover;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Serhioromano
@Serhioromano
Web Developer
Я бы сделал картинку как фон в контейнере круглом.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы