Адаптуються картинки-заставки на CSS - CSS-LIVE
Переклад статті Flexible CSS cover images з сайту nicolasgallagher.com , C дозволу автора - Ніколаса Галахера .
Нещодавно я підключив до своїх постах можливість додавання великих картинок-заставок, як показано вище. Початкове зображення обрізане, і до певного максимального розміру відображається в заданій пропорції. У цій статті описується реалізація цього способу.
Підтримка браузерами: Chrome, Firefox, Safari, Opera, IE 9 +
функції
Спосіб, який встановлює масштаб картинки-заставки і змінює співвідношення сторін, ілюстрований на наступній діаграмі:
Елемент картинки-заставки повинен вміти:
- відображати фіксоване співвідношення сторін, до тих пір, поки їх конкретні максимальні розміри перевищені;
- підтримувати різні пропорції;
- підтримувати властивості max-height і max-width;
- підтримувати різні фонові картинки;
- відобразити зображення так, щоб воно або повністю заповнювало компонент, або цілком містилося в ньому;
- центрувати зображення;
Співвідношення сторін
Співвідношення сторін порожнього, блочного елемента може управлятися за допомогою установки в процентне значення його властивостей padding-bottom або padding-top. Дане оголошення (без будь-якого явного height), перетворює висоту елемента в 50% від його ширини.
.CoverImage {padding-bottom: 50%; }
Зміни значення такого padding'a змінить і співвідношення сторін. Наприклад, результатом padding-а в 25% буде пропорція 4: 1, padding в 33.333% в 3: 1 відповідно, і т.д.
максимальні розміри
Проблема з використанням цього трюку / хака для пропорцій полягає в тому, що якщо у елемента оголошено max-height, воно не буде враховуватися. Це можна обійти за допомогою іншого «хака». Замість того, щоб виставляти padding елементу, ми можемо створити псевдоелемент і призначити padding вже йому.
.CoverImage: before {content: ""; display: block; padding-bottom: 50%; }
Тепер max-height у головного елемента буде працювати. Варто було б так само обрізати і переповнення псевдоелемента.
.CoverImage {display: block; max-height: 300px; max-width: 1000px; overflow: hidden; } .CoverImage: before {content: ""; display: block; padding-bottom: 50%; }
Цей прийом для співвідношення сторін використовується компонентом FlexEmbed в препроцесорів SUITCSS. Цей компонент призначений насамперед для чуйних вбудованих відео, але він досить гнучкий, щоб бути корисним щоразу, коли вам необхідний відображається елемент з визначеним співвідношенням сторін. Цей компонент надає модифікатори для пропорцій 2: 1, 3: 1, 16: 9, і 4: 3. Компонент картинок-обкладинок може розширити компонент FlexEmbed.
<Div class = "CoverImage FlexEmbed FlexEmbed - 2by1"> </ div>
фонове зображення
Картинка-обкладинка додається в якості фонового зображення, яке розтягується до розміру, достатнього, щоб покрити всю область елемента. Це гарантує, що зображення буде обрізане щоб вписатися в пропорції елемента.
.CoverImage {... background-repeat: no-repeat; background-size: cover; }
Якщо хочете різні обкладинки-картинки для різних ситуацій, вони можуть бути додані через атрибут style.
<Div class = "..." style = "background-image: url (cover.jpg)"> </ div>
Зображення можуть бути повністю відцентровані за допомогою позиції фону і центрування блоку. Ця гарантує, що зображення буде відцентроване в елементі, і що сам елемент буде так само відцентровано всередині свого батька (коли він досягне значення max-width).
.CoverImage {... background-position: 50%; background-repeat: no-repeat; background-size: cover; margin: 0 auto; }
фінальний результат
Якщо ви покладалися на модуль FlexEmbed, то вам треба було зовсім небагато коду. (Подивіться демо-приклад з усім кодом, що включає код від FlexEmbed)
/ ** * потрібно: suitcss / вбудована гнучкість * / .CoverImage {background-position: 50%; background-repeat: no-repeat; background-size: cover; margin: 0 auto; max-height: 300px; max-width: 1000px; } <Div class = "CoverImage FlexEmbed FlexEmbed - 3by1" style = "background-image: url (cover.jpg)" <</ div>
Ви можете додати додаткові настройки, такі як додавання фонового кольору, або можливість перемикання між ключовими словами cover і contain для background-size.