Як змінити розмір фонового зображення за допомогою CSS3
Оригінал: sitepoint.com/css3-background-size-property
Переклад: Влад Мержевич
У CSS 2.1 фонове зображення, яке застосовується до контейнера, зберігає свої фіксовані розміри. На щастя, у CSS3 додано властивість background-size, за допомогою якої фон може бути розтягнутий або стиснутий. Це ідеально підходить, якщо ви створюєте шаблон для адаптивного веб-дизайну.
Є кілька способів визначення розмірів — подивіться демонстраційну сторінку background-size.
Абсолютна зміна розміру
Можуть застосовуватися одиниці вимірювання.
background-size: ширина висота;За замовчуванням ширина і висота встановлена як auto, що залишає початкові розміри зображення.
Ви можете задати новий розмір зображення за допомогою абсолютних одиниць виміру, таких як px, em, cm і інші. Пропорції змінюватимуться, якщо це потрібно. Наприклад, якщо наше фонове зображення має розміри 200×200 пікселів, то наступний код залишить цю висоту, але зробить ширину в два рази менше:
background-size: 100px 200px;Якщо вказано лише одне значення, воно вважається шириною. Висота встановлюється як auto і зберігаються пропорції:
background-size: 100px;
/* аналогічно */
background-size: 100px auto;Цей код масштабує зображення з 200×200 до 100×100 пікселів.
Відносна зміна розміру через відсотки
Якщо застосовуються відсотки, розміри базуються на елементі, а НЕ на зображенні:
background-size: 50% auto;Ширина фонового зображення, отже, залежить від розмірів контейнера. Якщо у контейнера ширина 500px, то розмір нашого зображення зменшиться до 250×250.
Використання відсотків може бути корисним для адаптивного дизайну. Змініть ширину демонстраційної сторінки, щоб зрозуміти, як змінюються розміри.
Масштабування до максимального розміру
Властивість background-size також розуміє ключове слово contain. Вона масштабує зображення таким чином, щоб воно заповнювало контейнер. Іншими словами, зображення буде збільшуватися або зменшуватися пропорціонально, але ширина і висота не будуть перевищувати розміри контейнера:
background-size: contain;Заповнення фоном
Властивість background-size також розуміє ключове слово cover. Зображення буде масштабуватися так, щоб заповнити весь контейнер, але якщо відмінні співвідношення сторін, то картинка буде обрізана.
background-size: cover;Масштабування кількох фонів
Кілька фонів можуть бути масштабовані за допомогою списку значень, розділених комами, йдучи в тому ж порядку.
background:
url("sheep.png") 60% 90% no-repeat,
url("sheep.png") 40% 50% no-repeat,
url("sheep.png") 10% 20% no-repeat #393;
background-size: 240px 210px, auto, 150px;Робота в браузерах
Останні версії всіх браузерів підтримують background-size без префіксів.
IE8 і нижче не підтримують цю властивість. Ви можете використовувати фільтр IE для емуляції значень content і cover, але неможливо змінити розмір фонового зображення без допомоги хитрощів, як додавання справжнього зображення позаду інших елементів. Це нечисто, тому я рекомендую елегантний спад.