Масштабування фону, webreference

Дозвіл моніторів постійно росте і при верстці веб-сторінок доводиться враховувати найширший діапазон дозволів. Це особливо важливо при використанні фонового малюнка, який або обрізається при низькій роздільній здатності монітора, або, навпаки, цілком не поміщається при високій роздільній здатності. Одним з рішень подібної ситуації є масштабування фону. Звичайно, це обіцяє деякі неприємності на зразок появи перекручувань і артефактів в зображеннях, а й розширює арсенал засобів верстки.

Управлінням розміром відповідає властивість background-size. в якості значення можна вказувати ключове слово cover. тоді розмір зображення буде такою, щоб його ширина і висота помістилися в задану область (наприклад, вікно веб-сторінки); ключове слово contain масштабує картинку так, щоб хоча б одна сторона картинки цілком помістилася в задану область. Крім того, припустимо вказувати явні розміри по горизонталі або вертикалі в процентах або інших одиницях CSS. На рис. 1 показано зміну розмірів зображень при різних значеннях background-size. Сірим кольором виділено блок розміром 280х200 пікселів, всередині якого встановлюється фон.

а. вихідні зображення

б. значення cover

в. значення contain

м Значення 100% 100%

д. Значення 250px

Мал. 1. Вид фонових картинок в залежності від значення background-size

Якщо вказано два значення розміру через пробіл, то перше значення визначає ширину по горизонталі, а друге по вертикалі. При цьому пропорції ігноруються, що добре помітно по рис. 1г. Замість одного з розмірів допустимо використовувати ключове слово auto. тоді браузер обчислює його автоматично, виходячи з пропорцій картинки.

У прикладі 1 встановлюється фонова фотографія, яка займає все вікно браузера.

Приклад 1. Фонова картинка

Результат даного прикладу показаний на рис. 2. При зміні розмірів вікна фотографія буде збільшуватися або зменшуватися, щоб повністю заповнити всю веб-сторінку.

Мал. 2. Фонова фотографія