Можно ли с помощью css масштабировать скругленное изображение не меняя его размер?

Question

[vezan]

Всем привет)
Возник вопрос, на странице есть круглые аватарки, скруглял я их при помощи свойства border-radius.
можно ли масштабировать изображение так, чтобы радиус круга при этом не поменялся?

Answer 1

[Андрей Федоров]

Используйте transform scale для внутренней картинки.
https://codepen.io/aliencash/pen/RqROGJ?editors=1100#0

Совместимость: https://caniuse.com/#search=transform

Comments

[alex]

ломается, если пропорции картинки отличны от 1:1

[Андрей Федоров]

Alex, не вижу. дайте скриншот и в каком браузере...

[alex]

Андрей Федоров,

если пропорции картинки отличны от 1:1

placeimg.com/600/400

[Андрей Федоров]

Alex, не относится к сути вопроса автора, но можно задать изображению изначальный transform scale больше 1.

[alex]

Андрей Федоров, согласен, но эта проблема вытекает из вопроса автора и относится к пуленепробиваемости верстки. хотя если у него абсолютно всегда будет 1:1, тогда вопросов нет

[Андрей Федоров]

Alex, всегда найдется извращенец, у которого аватар 9999х1... ) надо ограничивать изначально картинку при заливке.

[vezan]

Андрей, спасибо, для этой конкретной задачи ваш совет подошел идеально)

Answer 2

[Дмитрий Христоев]

https://webref.ru/css/object-fit

Comments

[Vadim]

В IE это работать не будет.

[Дмитрий Христоев]

Vadim, https://github.com/constancecchen/object-fit-polyfill

[Vadim]

О господи, нахрена? Если можно сделать гораздо проще.

[Дмитрий Христоев]

Vadim, т.е. object-fit в ИЕ не работает. А флекс работает? Если уже на то пошло, то и писать надо через абсолют

Answer 3

[Vadim]

Если я правильно вас понял, то можно сделать вот так:
https://jsfiddle.net/s7Lv1fyn/2/

UPD:
Исправленная кроссбраузерная версия:
https://jsfiddle.net/s7Lv1fyn/7/

Comments

[Андрей Федоров]

В ff не работает.