Масштабированная модель Эйфелевой башни в Парке
Мини-Франция
В HTML5 включен новый элемент для вставки иллюстрации с
подписью. (Мы покажем, как сделать тоже самое в HTML4 ниже.)
<figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Эйфелева башня">
<figcaption>Масштабированная
модель Эйфелевой башни в Парке
Мини-Франция</figcaption></figure>
Например, чтобы сместить изображение вправо на расстояние,
равное 30% от ширины окружающих абзацев, используйте следующие
правила:
На самом деле, действительно необходимы только две первые
декларации (float и width), а остальные использованы исключительно
для оформления.
Масштабирование изображения
Здесь только одна проблема, и она заключается в том, что
изображение может быть слишком широким. В этом случае, ширина
изображения всегда будет составлять 136 px и иллюстрация будет
занимать 30% от окружающего текста. И если вы сузите окно, то
изображение может не поместиться и вылезти за рамку (попробуйте!).
Если вы знаете ширину всех изображений в документе, вы можете
указать минимальную ширину иллюстрации следующим образом:
figure {
min-width: 150px;
}
Сен-Тропе и его форт в вечернем солнце
Другой способ — это задать масштаб самого изображения. Именно
это мы и сделали с изображением справа. Как вы, возможно, видете,
если вы сделаете окно браузера слишком широким, изображения в
формате JPEG масштабируются не очень хорошо. Но если это
изображение — диаграмма или график в формате SVG, то масштабирование работает просто
великолепно. Вот разметка, которую мы использовали:
<figure>
<p><img class=scaled src="st-tropez.jpg"
alt="Сен-Тропе">
<figcaption>Сен-Тропе и его форт в
вечернем солнце</figcaption>
</figure>
И в дополнение последнее правило: этот приём делает изображение
настолько широким, насколько позволяет пространство внутри
иллюстрации (область внутри рамок и отступов — border и padding).
Размещение подписи сверху
Средиземное море около Кап Ферра
HTML позволяет элементу figcaption быть либо первым, либо
последним элементом внутри иллюстрации. Если не применять
каких-либо правил CSS, это приведёт к тому, что подпись будет
размещена либо над иллюстрацией, либо под ней соответственно.
Однако, независимо от разметки текста, вы можете указать в CSS,
чтобы подпись появилась либо над изображением, либо под ним. Этого
можно достичь, указав браузеру, что изображение должно быть
отформатировано как таблица, в которой картинка является
единственной ячейкой, а подпись становится заголовком таблицы.
Просто добавьте эти правила в таблицу стилей из предыдущей секции:
Стиль, который мы использовали на этой странице, содержит рамку
серого цвета. Она обрамляет иллюстрацию. К сожалению, когда мы
используем табличную разметку, чтобы поместить подпись сверху или
снизу, мы должны указать рамку другим способом, потому что подпись
размещена за пределами границы таблицы. Мы можем исправить это,
поместив часть границы на саму подпись:
Масштабированная модель Эйфелевой башни в Парке Мини-Франция
HTML4, в отличие от HTML5, не имеет элементов, которые бы
позволили вставить в документ изображение с подписью. Это
предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот
единственная возможность воспроизвести элемент figure:
<div class=figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Эйфелева башня">
<p>Масштабированная модель
Эйфелевой башни в
Парке Мини-Франция
</div>
Затем в таблице стилей вы используете класс "figure" для
форматирования иллюстрации так, как вам необходимо. Например, чтобы
сместить иллюстрацию вправо на расстояние, равное 30% от ширины
окружающих абзацев, необходимо применить следующие правила:
Как и ранее, необходимы только две первые декларации (float и
width), а остальные использованы исключительно для оформления.
Масштабирование изображения в HTML4
Чтобы избежать выхода изображения за рамки иллюстрации и при
условии, что вы знаете ширину всех изображений в документе, вы
можете добавить минимальную ширину 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).
Размещение описания сверху в HTML4
Средиземное море около Кап Ферра
Чтобы разместить подпись сверху, добавьте эти правила в таблицу
стилей из предыдущих секций:
div.figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
'+' приводит к тому, что правило действует на элемент P, который
следует за другим P. Что означает, что условие действует на второй
элемент P иллюстрации, который содержит описание картинки.
(Эта техника может привести к ошибкам в некоторых браузерах,
разработанных ранее 2003, особенно в комбинации с масштабированием
изображений, как в примере выше)
Как и прежде, серая рамка, которую мы выбрали для обрамления
иллюстраций на этой странице, будет обрамлять только само
изображение. Чтобы рамка была вокруг изображения и
подписи, добавьте эти правила:
