CodeBase | Frontend Chat

⚙️ Что такое свойство object-fit в CSS и зачем оно используется? Свойство object-fit управляет тем, как изображение или видео масштабируется внутри контейнера, не искажая пропорции. По смыслу похоже на background-size, но применяется к <img> и <video>. ➡️ Пример: <div class="wrapper"> <img src="photo.jpg" alt="пример"> </div> <style> .wrapper { width: 300px; height: 200px; } img { width: 100%; height: 100%; object-fit: cover; } </style> 🗣️ Популярные приёмы: • cover — заполняет контейнер, обрезая лишнее • contain — показывает всё изображение, сохраняя пропорции • fill — растягивает без сохранения пропорций • none — без масштабирования object-fit решает классическую проблему «кривых картинок» в карточках, галереях и адаптивных интерфейсах CodeBase | Frontend | #Основы