Свойство object-fit : cover заполняет бокс и обрезает лишнее, пропорции не ломаются. contain вписывает изображение целиком, оставляя поля. fill растягивает без разбора — именно это и случается с аватарками по умолчанию. none показывает в оригинальных размерах, scale-down выбирает между contain и none автоматически. В статье разбираем каждое значение на примерах. #css 👀 Читать статью
Растянутая аватарка с овальным лицом на сайте — это object-fit: fill по умолчанию и две минуты невнимательности.
Свойство object-fit : cover заполняет бокс и обрезает лишнее, пропорции не ломаются. contain вписывает изображение целиком, оставляя поля. fill растягивает без разбора — именно это и случается с аватарками по умолчанию. none показывает в оригинальных размерах, scale-down выбирает между contain и none автоматически. В статье разбираем каждое значение на примерах. #css
