Адаптивні зображення та відео за допомогою object-fit & object-position

3 хв. читання

У цій статті ми розглянемо дві властивості 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 інструментів кожного веб-розробника.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: object fit, object fit css, css position