Масштабована модель Ейфелевої вежі у Парку
Міні-Франція
У HTML5 доданий новий елемент для додавання ілюстрації з описом.
(Ми покажемо, як зробити теж саме у HTML4 нижче.)
<figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Ейфелева вежа">
<figcaption>Масштабована
модель Ейфелевої вежі у Парку
Міні-Франція</figcaption></figure>
Наприклад, щоб змістити зображення праворуч на відстань 30% від
ширини оточуючих абзаців, використовуйте наступні правила:
Насправді, дійсно необхідні тілки перших два визначення (float и
width), інші тільки для декоративного оформлення.
Масштабування зображення
Тут тільки одна проблема і вона заключається в тому, що
зображення може бути дуже широким. У цьому випадку зображення
завжди 136px та ілюстрація буде займати 30% від оточуючого тексту.
Та якщо ви зробите віконце менше, зображення може не вміститися й
вилізти за рамку DIV (спробуйте це!).
Якщо ви знаєте ширину всіх зображень у документі, ви можете
вказати мінімальну ширину ілюстрації наступним чином:
figure {
min-width: 150px;
}
Сен-Тропе та його форт у вечірньому сонці
Інший спосіб - це масштабувати власне зображення. Це те, що ми
зробили із зображенням справа. Як ви, можливо, бачили, якщо зробити
вікно браузера дуже широким - зображення JPEG масштабується не дуже
добре. Але якщо це зображення - діаграма або графік у SVG форматі, масштабування працює
просто чудово. Ось розмітка, яку ми використали:
<figure>
<p><img class=scaled src="st-tropez.jpg"
alt="Сен-Тропе">
<figcaption>Сен-Тропе та його форт
у вечірньому сонці</figcaption>
</figure>
Одне доповнення: цей прийом робить зображення настільки широким,
наскільки дозволяє DIV (площа всередині border та padding).
Розміщення опису зверху
Середземне море біля Кап Ферра
HTML дозволяе елементу figcaption бути або першим, або останнім
елементом всередині ілюстрації. Якщо не застосовувати будь-яких
правил CSS, це призведе до того, що опис буде розміщено або над
ілюстрацією, або під нею відповідно.
Однак, незалежно від розмітки тексту, ви можете вказати в CSS,
щоб опис з'явився або над зображенням, або під ним. Цього можна
досягти, вказавши браузеру, що зображення повинно бути
відформатовано як таблиця, в якій картинка є єдиною клітинкою, а
опис стає заголовком таблиці. Просто додайте ці правила в таблицю
стилів з попередньої секції:
Стиль, який ми використовували на цій сторінці, містить рамку
сірого кольору. Вона обрамляє ілюстрацію. На жаль, коли ми
використовуємо табличну розмітку, щоб помістити опис зверху чи
знизу, ми повинні вказати рамку іншим чином, тому що опис
розміщений за межами таблиці. Ми можемо виправити це, помістивши
частину кордону на сам опис:
Масштабована модель Ейфелевої вежі у Парку Міні-Франція
HTML 4, на відміну від HTML5, не має елементів, які б дозволили
вставити в документ зображення з описом. Це пропонувалося зробити
(дивись HTML3), але в
підсумку у HTML4 ця пропозиція не увійшла. Ось єдина можливість
відтворити елемент figure:
<div class=figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Ейфелева вежа">
<p>Масштабована модель
Ейфелевої вежі у
Парку Міні-Франція
</div>
Потім у таблиці стилів ви використовуєте клас "figure" для
форматування ілюстрації так, як вам необхідно. Наприклад, щоб
змістити ілюстрацію вправо на відстань, рівну 30% від ширини
оточуючих абзаців, необхідно застосувати такі правила:
Як і раніше, необхідні тільки дві перші декларації (float і
width), а інші використані виключно для оформлення.
Масштабування зображення у HTML 4
Щоб уникнути виходу зображення за рамки ілюстрації та за умови,
що ви знаєте ширину всіх зображень в документі, ви можете додати
мінімальну ширину DIV наступним чином:
div.figure {
min-width: 150px;
}
Сен-Тропе та його форт у вечірньому сонці
Для масштабування зображення на всю ширину ілюстрації (як ми
зробили з зображенням праворуч), ви можете додати атрибут КЛАСУ і
відповідне правило CSS, дуже схоже на приклад з HTML5 вище. Ось
розмітка, яку ми використовували:
<div class=figure>
<p><img class=scaled src="st-tropez.jpg"
alt="Сен-Тропе">
<p>Сен-Тропе та його форт
у вечірньому сонці
</div>
Одне доповнення: цей прийом робить зображення настільки широким,
наскільки дозволяє DIV (площа всередині border та padding).
Розміщення опису зверху у HTML 4
Середземне море біля Кап Ферра
Щоб розмістити підпис зверху, додайте ці правила в таблицю
стилів з попередніх секцій:
div.figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
'+' Призводить до того, що правило діє на елемент P, який слідує
за іншим P. Що означає, що умова діє на другий елемент P
ілюстрації, який містить опис картинки.
(Ця техніка може привести до помилок в деяких браузерах,
розроблених раніше 2003, особливо в комбінації з масштабуванням
зображень, як в прикладі вище)
Як і раніше, сіра рамка, яку ми вибрали для обрамлення
ілюстрацій на цій сторінці, обрамлятиме тільки саме зображення. Щоб
рамка була навколо зображення та опису, додайте ці
правила:
