На самом деле, действительно необходимы только две первые декларации (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"
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,
особенно в комбинации с масштабированием изображений, как в примере выше)
Как и прежде, серая рамка, которую мы выбрали для обрамления иллюстраций на этой странице,
будет обрамлять только само изображение.
Чтобы рамка была вокруг изображения и подписи, добавьте эти правила:
Учебник HTML Учебник CSS Учебник JavaScript How To Tutorial Учебник SQL Учебник Python Учебник W3. CSS Учебник Bootstrap Учебник PHP Учебник Java Учебник C++ Учебник jQuery
904 Справочник 9004
904
Справочник по HTML Справочник по CSS Справочник по JavaScript Справочник по SQL Справочник по Python Справочник по W3.CSS Справочник по Bootstrap Справочник по PHP Цвета HTML Справочник по Java Справочник по Angular Справочник по jQuery
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены. W3Schools работает на основе W3.CSS.
Вот как он идентифицирует автономный контент »
В тегах HTML, New
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше
Элемент веб-изображений
: рекомендации и HTML-код в одном полезном руководстве
Что делает элемент HTML Figure: вот как он идентифицирует самостоятельный контент ?
Элемент идентифицирует автономное содержимое, связанное с основным содержимым, например изображение, таблицу или диаграмму. Элемент часто вкладывается в элемент, чтобы добавить подпись к содержимому, идентифицированному тегами.
Дисплей
Блок
Использование
Структурная
Содержание
1 Пример
2 Самосодержащий Содержание
3 <фиг. Пример
<рисунок>
рис. 1 Розовый фламинго.
рис. 1 Розовый фламинго.
Самодостаточное содержимое
Элемент является новым в HTML5 и является одним из тех элементов, в которых сообщество веб-разработчиков все еще немного не уверено. Вот что говорит об этом спецификация W3C:
Элемент figure представляет собой единицу содержимого, необязательно с заголовком, которая является автономной, на которую обычно ссылаются как на единую единицу из основного потока документа, и который можно удалить из основного потока документа, не затрагивая смысла документа.
Кроме того, он указывает, что содержимое элемента должно быть потоковым содержимым с необязательным заголовком до или после содержимого. Теоретически это можно использовать для нескольких типов вещей: боковых панелей, цитат, отступлений, диаграмм, изображений, вторичных медиа. На практике чаще всего используются изображения с подписями и диаграммы. Это имеет смысл, так как «рисунок» имеет значение в академическом и техническом письме — иллюстрация, изображение, диаграмма или другой визуальный контент, обычно снабженный подписью, связанный с основным содержанием, но часто отделенный от него. Однако нет причин, чтобы это нельзя было использовать для каких-то других целей.
по сравнению с
Элементы и , судя по спецификации, используются одинаково. Некоторые люди используют для кавычек и боковых панелей, связанных с контентом, поэтому есть некоторое совпадение. Но есть и некоторые отличия. Главное отличие, конечно, в том, что не имеет встроенного элемента заголовка.
Вот разметка, которую мы использовали:
figure {
min-width: 150px;
}
figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
jpg» alt=»Trulli»
> 
1
CSS 
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Теоретически это можно использовать для нескольких типов вещей: боковых панелей, цитат, отступлений, диаграмм, изображений, вторичных медиа. На практике чаще всего используются изображения с подписями и диаграммы. Это имеет смысл, так как «рисунок» имеет значение в академическом и техническом письме — иллюстрация, изображение, диаграмма или другой визуальный контент, обычно снабженный подписью, связанный с основным содержанием, но часто отделенный от него. Однако нет причин, чтобы это нельзя было использовать для каких-то других целей.