⚙️ Что такое свойство object-fit в CSS и зачем оно используется?

⚙️ Что такое свойство object-fit в CSS и зачем оно используется?

object-fit — это CSS-свойство, которое определяет, как содержимое <img> или <video> должно масштабироваться внутри контейнера. Оно позволяет изменять размер изображения, сохраняя его пропорции, без искажений.

➡️ Пример:

<img src="image.jpg" class="responsive-img" alt="Пример изображения"> <style> .responsive-img { width: 300px; height: 200px; object-fit: cover; /* Заполняет контейнер, обрезая лишнее */ } </style>

🗣 В этом примере:

• object-fit: cover; делает так, что изображение заполняет контейнер, но не растягивается.

• object-fit: contain; сохраняет весь контент, добавляя пустое пространство.

• Это свойство особенно полезно при адаптивной вёрстке и работе с изображениями разного размера.

CodeBase | Frontend | #CSS