Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Eugene Skrypets (Neighbor Report)
Смотрите также указатель всех приёмов работы.
На этой странице:
Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, ширина изображения всегда будет составлять 136 px и иллюстрация будет занимать 30% от окружающего текста. И если вы сузите окно, то изображение может не поместиться и вылезти за рамку (попробуйте!).
Если вы знаете ширину всех изображений в документе, вы можете указать минимальную ширину иллюстрации следующим образом:
figure { min-width: 150px; }
Другой способ — это задать масштаб самого изображения. Именно это мы и сделали с изображением справа. Как вы, возможно, видете, если вы сделаете окно браузера слишком широким, изображения в формате JPEG масштабируются не очень хорошо. Но если это изображение — диаграмма или график в формате SVG, то масштабирование работает просто великолепно. Вот разметка, которую мы использовали:
<figure> <p><img class=scaled src="st-tropez.jpg" alt="Сен-Тропе"> <figcaption>Сен-Тропе и его форт в вечернем солнце</figcaption> </figure>
А вот таблица стилей:
figure { float: right; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 0.5em; padding: 0.5em; } img.scaled { width: 100%; }
И в дополнение последнее правило: этот приём делает изображение настолько широким, насколько позволяет пространство внутри иллюстрации (область внутри рамок и отступов — border и padding).
Масштабированная модель Эйфелевой башни в Парке Мини-Франция
HTML4, в отличие от HTML5, не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Это предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот единственная возможность воспроизвести элемент figure:
<div class=figure> <p><img src="eiffel.jpg" width="136" height="200" alt="Эйфелева башня"> <p>Масштабированная модель Эйфелевой башни в Парке Мини-Франция </div>
Затем в таблице стилей вы используете класс "figure" для форматирования иллюстрации так, как вам необходимо. Например, чтобы сместить иллюстрацию вправо на расстояние, равное 30% от ширины окружающих абзацев, необходимо применить следующие правила:
div.figure { float: right; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 0.5em; padding: 0.5em; }
Как и ранее, необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.
Чтобы избежать выхода изображения за рамки иллюстрации и при условии, что вы знаете ширину всех изображений в документе, вы можете добавить минимальную ширину DIV следующим образом:
div.figure { min-width: 150px; }
Сен-Тропе и его форт в вечернем солнце
Чтобы смасштабировать изображение на всю ширину иллюстрации (как мы сделали с изображением справа), вы можете добавить атрибут КЛАССА и соответствующее правило CSS, очень похожее на пример с HTML5 выше. Вот разметка, которую мы использовали:
<div class=figure> <p><img class=scaled src="st-tropez.jpg" alt="Сен-Тропе"> <p>Сен-Тропе и его форт в вечернем солнце </div>
А вот таблица стилей:
div.figure { float: right; width: 30%; border: thin silver solid; margin: 0.5em; padding: 0.5em; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; } img.scaled { width: 100%; }
Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).
Created 17 January 2001;
Last updated Ср 06 янв 2021 05:40:49