Без object-fit получается сплющенный кот. Свойство object-fit управляет тем, как <img> или <video> вписывается в свой контейнер. cover заполнит бокс с обрезкой лишнего, contain впишет картинку целиком с сохранением пропорций, fill растянет как есть. В статье разбираем каждое значение на примерах и показываем, зачем добавлять max-width: 100%, чтобы картинки не ломали сетку. #css #html 📕 Читать статью
Контент-менеджер прислал фото 1920×1080, а в карточке места 300×200. Без object-fit получается сплющенный кот.
Свойство object-fit управляет тем, как <img> или <video> вписывается в свой контейнер. cover заполнит бокс с обрезкой лишнего, contain впишет картинку целиком с сохранением пропорций, fill растянет как есть. В статье разбираем каждое значение на примерах и показываем, зачем добавлять max-width: 100%, чтобы картинки не ломали сетку. #css #html
