Зображення на всю ширину макету
Відомо, що ширина вікна браузера змінюється в широких межах, тому підігнати під неї не завжди можливо. Поширити зображення на всю ширину можливо лише за умови використання фіксованого макету. У цьому випадку ширина чітко визначена, і зробити зображення потрібного розміру відносно просто. Слід уточнити, що мова йде не про ширину веб-сторінки як такої, а лише про ширину макету, в який вписується вся інформація. Наприклад, на сайті boeing.com використовується саме такий підхід і загальна ширина зображень не перевищує заданого значення.
При "резиновому" макеті, коли потрібно встановити зображення на всю ширину вікна браузера, незалежно від його розміру, застосовують методи, які детально описані нижче.
Розтягнення зображення до 100%
Перший метод полягає в тому, що для тегу <img> значення атрибута width встановлюється рівним 100%. Зображення в цьому випадку розтягується на всю ширину контейнера, а його висота залишається незмінною. Зрозуміло, що при цьому в зображенні неодмінно з'являться спотворення, тому подібний метод застосовується досить рідко і далеко не для всіх картинок.
Приклад 1. Ширина зображення
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Картинка 100% ширини</title>
</head>
<body>
<p><img src="images/sample.gif" width="100%"
height="100" alt="Ілюстрація"></p>
</body>
</html>У цьому прикладі ширина (width) зображення задана як 100%, а висота (height) — 100 пікселів.
Використання безшовного фонового зображення
Спочатку слід підготувати фонове зображення, воно обов'язково повинно бути таким, що якщо поруч покласти дві однакові картинки, то вони об'єднаються в одну, і між ними не виникне помітних артефактів. Приклад такого зображення показано на рис. 2.
Ширину зображення достатньо зробити 20–30 пікселів.
Уникайте робити занадто малу ширину подібного зображення, наприклад, 1–2 пікселя, оскільки це принесе лише шкоду. Обсяг файлу зменшиться незначно, а браузеру знадобиться достатньо часу, щоб повністю "замостити" потрібну площу.
Сам фон представляє інтерес лише як частина загального результату. Це означає, що на фонову область слід накласти ще одне зображення так, щоб разом вони утворювали єдине ціле. На рис. 3 показано зображення, правий край якого збігається з фоновим малюнком. Тому при накладанні цього зображення на фон вони точно збігнуться.
Приклад 2. Фонове зображення
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фонове зображення</title>
<style type="text/css">
BODY {
margin: 0; /* Видаляємо відступи в браузері */
}
#toplayer {
background: url(images/bg.gif) repeat-x; /* Параметри фону */
height: 69px; /* Висота шару */
border-bottom: 2px solid maroon; /* Параметри лінії знизу */
}
</style>
</head>
<body>
<div id="toplayer">
<img src="images/logo.gif" width="279" height="69" alt="Логотип сайту">
</div>
</body>
</html>У цьому прикладі висота блоку встановлюється за допомогою властивості height, вона співпадає з висотою зображення, а його ширина за замовчуванням дорівнює auto, іншими словами, займає всю доступну ширину. Повторення фону відбувається тільки по горизонталі, це забезпечує значення repeat-x властивості background.
Використання фонового зображення не завжди є обов'язковим, іноді достатньо однофарбового заповнення прямокутної області. Щоб гармонійно розмістити зображення на такому фоні, застосовують тонування зображення (сепію, як це ще називається) або градієнтний перехід, як показано на рис. 4.
Рис. 4. Зображення з градієнтом для розміщення на кольоровому фоні
Графічні файли у форматі JPEG не завжди підходять для накладання на кольоровий фон через те, що цей формат вносить спотворення в зображення. Через це, гладкого переходу від зображення до фону може не вийти, оскільки буде видно помітний зріз. У цьому випадку краще використовувати формат GIF або PNG.
При використанні однофарбового фону код трохи зміниться (приклад 3). Повторювати фон тепер не потрібно, тому властивість background матиме тільки одне значення — бажаний колір фону.
Приклад 3. Колір фону
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Фоновий колір</title>
<style type="text/css">
BODY {
margin: 0; /* Видаляємо відступи в браузері */
}
#toplayer {
background: #66a240; /* Колір фону */
height: 100px; /* Висота шару */
font-family: Verdana, sans-serif; /* Набір шрифту */
font-size: 32px; /* Розмір шрифту */
font-weight: bold; /* Жирний начерку */
color: white; /* Білий колір тексту */
}
</style>
</head>
<body>
<div id="toplayer">
<img src="images/logo2.png" width="193" height="100" alt="Логотип сайту" align="middle">
Виставка квітів
</div>
</body>
</html>У цьому прикладі встановлюємо параметри блоку — його висоту і колір, а також характеристики тексту заголовка. Отриманий результат показаний на рис. 5.
При використанні зображення на всю ширину макету сторінки залежить від використаного методу верстки. Якщо використовується макет фіксованої ширини, то загальна його ширина відома наперед і зображення по горизонталі слід обмежити цією величиною. Коли ми маємо справу з "резиновим" макетом, то у цьому випадку активну роль відіграють фонові зображення. Вони повторюються по горизонталі таким чином, що утворюється зливна єдина картинка. Також використовуються широкі фонові зображення, які не призводять до появи горизонтальної полоси прокрутки, але при цьому займають всю відведену їм ширину, незалежно від розміру вікна браузера.