Зображення на всю ширину макету

Відомо, що ширина вікна браузера варіюється в досить широких межах, тому підгадати під неї не представляється можливим. Встановити малюнок на всю ширину можна лише в тому випадку, коли застосовується фіксований макет. Ширина при цьому чітко задана, і зробити малюнок необхідного розміру досить просто. Слід уточнити, що мова тут йде не про ширину веб-сторінки як такої, а лише про ширину макета, в який вписується вся інформація. Наприклад, на сайті boeing.com застосовується саме такий підхід (рис. 1) і сумарна ширина зображень не перевищує задану величину.

Мал. 1. Головна сторінка сайту boeing.com

При «гумовому» макеті, коли потрібно встановити зображення на всю ширину вікна браузера, незалежно від його розміру, застосовують методи, які детально описані далі.

Розтягування малюнка до 100%

Перший метод полягає в тому, що для тега значення параметра width встановлюється рівним 100% (приклад 1). Зображення в такому випадку розтягується на всю ширину контейнера, а його висота залишається незмінною. Зрозуміло, що в малюнку при цьому неминуче з'являться спотворення, тому подібний метод застосовується досить рідко і далеко не для всіх картинок.

Приклад 1. Ширина зображення

В даному прикладі ширина (width) малюнка задана 100%, а висота (height) - 100 пікселів.

Використання безшовного фонового зображення

Спочатку слід підготувати фоновий малюнок, він обов'язково повинен бути таким, що якщо поруч покласти дві однакові картинки, то вони зливаються в одну, і між ними не виникає помітних артефактів. Приклад такого зображення показаний на рис. 2.

Мал. 2. Зображення для створення фону

Ширину малюнка досить зробити 20-30 пікселів.

Остерігайтеся робити занадто малу ширину подібної картинки, на зразок 1-2 пікселів, оскільки це принесе тільки шкоду. Обсяг файлу зменшиться незначно, а браузеру буде потрібно достатньо часу, щоб повністю «замостити» потрібну площу. Причому це буде помітно.

Сам фон становить інтерес лише як частина загального результату. Це означає, що на фонову область має бути накладене ще один малюнок так, щоб разом вони утворили єдине ціле. На рис. 3 показано зображення, правий край якого збігається з фоновим малюнком. Тому при накладенні цього малюнка на фон вони точно співпадуть.

Мал. 3. Картинка для накладення на фон

Дане зображення має вирівнюватися по лівому краю вікна браузера, оскільки правий край малюнка поєднується з фоном. Саме в цьому випадку і картинка і фон утворюють цілісне зображення. У прикладі 2 приведено створення подібного блоку за рахунок використання стильової властивості background.

Приклад 2. Фонове зображення

В даному прикладі висота блоку задається за допомогою властивості height. вона збігається з висотою малюнка, а його ширина за замовчуванням дорівнює auto. іншими словами, займає всю доступну ширину. Повторення тло може призвести тільки по горизонталі, це забезпечує значення repeat-x параметра background.

Використовувати фоновий малюнок не завжди обов'язково, іноді цілком підійде і одноколірна заливка прямокутної області. Щоб гармонійно розташувати зображення на такому тлі застосовують тонування малюнка (сепія, як це ще називається) або градієнтний перехід, як показано на рис. 4.

Мал. 4. Зображення з градієнтом для розміщення на кольоровому тлі

Графічні файли у форматі JPEG не завжди підходять для накладення на кольоровий фон через те, що цей формат вносить спотворення в малюнок. За рахунок цього, гладкого переходу від зображення до фону може не вийти, оскільки буде видно помітний стик. В цьому випадку краще застосовувати формат GIF.

При використанні одноколірної фону код незначно зміниться (приклад 3). Повторювати фон тепер не потрібно, тому параметр background матиме тільки одне значення - бажаний колір фону.

Приклад 3. Колір фону

В даному прикладі встановлюємо параметри блоку - його висоту і колір, а також характеристики тексту заголовка. Отриманий результат продемонстрований на рис. 5.

Мал. 5. Поєднання кольору фону і малюнка

Фоновий малюнок великої ширини

Попередній спосіб, хоча і застосовується досить часто і дає цілком відповідний результат, все ж не встановлює один малюнок на всю ширину макету. Для досягнення цієї мети застосовують наступний алгоритм. Спочатку готується зображення досить великий ширини (від 1000-1200 пікселів), після чого воно ставиться як фоновий малюнок для певної верстви.

Мал. 6. Шпалери в вікні браузера

У прикладі 4 показано, як отримати подібний результат. Застосовується знову ж властивість background. як його значення задається: колір фону, він буде відображатися, поки малюнок не завантажиться; шлях до фонової зображенні і її параметри. Так, значення right top говорить, що правий край зображення буде фіксуватися, а при зміні ширини вікна браузера стане з'являтися ліва невидима частина картинки. Якщо цей аргумент прибрати, то за замовчуванням буде фіксуватися лівий край.

Приклад 4. Малюнок на всю ширину сторінки