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

Question

[Emptyform]

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

Вопрос - есть ли способ решить это без background-image, а посредством нормального img ?

Comments

[AlikDex]

object-fit: cover;
но это далеко не во всех браузерах работает.

[Emptyform]

AlikDex, подправите мой пример с этим параметром? У меня для хрома не получается

Answer 1

[Ольга Ветер]

ориентируясь на ваш пример я бы сделала картинки как положено картинками и
ваш контейнер
.img-cover {
-display: inline-block;
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
}
картинка img внутри него
img {
width: 100%;
height: auto;
object-fit: cover;
}

Comments

[Emptyform]

Как-то не очень: https://jsfiddle.net/Talker/xev79mfL/
Может, подправите пример?

[lemme]

Emptyform, https://jsfiddle.net/xev79mfL/3/

img {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 0;
 height: 0;
 min-width: 100%;
 min-height: 100%;
 object-fit: cover;
}

[Emptyform]

lemme, браво )) разместите, плиз, свой вариант отдельным ответом, чтобы я его пометил решением ))

[lemme]

Emptyform, этот ответ и есть решение, а я его дополнил))

[Emptyform]

lemme, ok, спасибо

[Ольга Ветер]

да, спасибо, тоже вариант. в тех случаях, когда мне приходилось это делать формат картинок - квадратные в круглые - изначально был жестко задан и обходилось без абсолюта, но здесь это надежнее.

Answer 2

[Sergey Romanov]

Я бы сделал картинку как фон в контейнере круглом.

Comments

[Emptyform]

Я пока так и делаю, но это не правильно - картинки, которые не чисто декоративные, а являются контентом, нужно выводить с посредством тега div

upd: пардон, конечно же тегом img

[Sergey Romanov]

По мне так аватар вообще сопуствующая графика. Но по словом контейнер я имел в видуд ДИВ кончено или Спан, кому что.

[Emptyform]

Sergey Romanov, извиняюсь, я имел в виду, что нужно выводить с помощью тега img

[Sergey Romanov]

По мне так как раз таки и не нужно. Это же аватр. Если конечно ты не хочешь что бы это стало метадатой при социальном шаринге. Короче нужно смотреть на контекст. А если нужно метадата то можно пользоваться специальными метатегами.