У цій статті ми розглянемо дві властивості CSS про які не знають багато розробників. Називаються вони object-fit і object-position головна їх мета - стилізування зображення і відео.
Спочатку ми продемонструємо те, як саме ними користуватися і потім поринемо у важливі аспекти використання. Ми підготували для вас невеликий додаток, в якому ви зможете погратися з властивостями і побачити їх у дії. Давайте почнемо!
Object-fit
За допомогою object-fit ми можемо вирішити, як зображення (або відео) розтягнеться стиснеться, щоб заповнити блок контенту. Це необхідно, коли у нас є фотографії з розмірами або співвідношеннями сторін, що не вписуються в наш макет.
Зазвичай для вирішення цієї проблеми ми створювали div і встановлювали фотографію, як фонове зображення, а потім вже змінювали його розмір. Тепер CSS дозволяє просто додати тег зображення, встановити його як джерело, а потім застосувати object-fit безпосередньо до зображення.
img {
width: 100%;
object-fit: cover;
}
Можливі значення, які ви можете йому надати:
-
fill (за замовчуванням) - ширина та висота зображення збігаються з розмірами блоку. У більшості випадків це зіпсує співвідношення сторін.
-
cover - зображення зберігає пропорції і заповнює весь блок, все що не вмістилось в нього буде обрізано і відображатися не буде.
-
contain - зображення зберігає свої пропорції і розтягується/стискається, щоб поміститися усередині блока.
-
none - зображення має оригінальний розмір і співвідношення сторін.
-
down - розмір контенту задається або як при вказівці none, або як при contain, дивлячись що з цього дасть менший розмір заміщуваного елемента в результаті.
Object-position
Ця властивість визначає, де всередині контейнера буде розташовуватися зображення. Вона приймає два чисельні значення, одне для верхньої-нижньої осі, а інший для осі зліва-направо. Ці значення можуть бути у відсотках, пікселях або інших одиницях виміру, і може бути негативним значенням. Деякі ключові слова, такі як center, top, right bottom, також можуть бути використані.
За умовчуванням зображення розміщене в середині контейнера, тож його звичайне значення:
img {
object-position: center;
/* which equals */
object-position: 50% 50%;
}
Demo тест
Читати про властивості CSS одна річ, а робота з ними це зовсім інша історія. Нижче за посиланням ви знайдете демо сторінку, де зможете на практиці прощупати всі властивості object-fit, object-position дати їм різні значення, щоб побачити, як вони можуть трансформуватися. Demo test
Підтримка браузерами
Дотримуючись всіх традицій CSS, підтримка браузерами object-fit, object-position вельми суперечлива, а IE, Edge зовсім їх не сприймають. Поки ми чекаємо від Microsoft задобрення цих властивостей, можна користуватись поліфілом. Крім того, це гарний варіант, щоб встановити замість зображення, фоновий колір.
object-fit, object-position можуть надати велику допомогу при створенні адаптивних веб-сторінок. Вони прості у використанні і найголовніше те, що вони виконують свою роботу на відмінно. Ми впевнені, що як тільки IE i Edge приймуть їх, вони швидко стануть частинкою CSS інструментів кожного веб-розробника.
Ще немає коментарів