Каскадные таблицы стилей
CSS советы & приемы

Изображения & описания

HTML не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Есть возможность сделать это в HTML3, но только не в HTML4. В HTML4 только одна возможность сделать это:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">

  <p>Масштабированная модель Эйфелевой
  башни в Парке Мини-Франция
</div>

Затем в таблице стилей используйте класс "figure" для форматирования фигуры, так как вам необходимо. К примеру, для смещения фигуры вправо на расстояние равное 25% от ширины параграфа, в котором находится данная фигура вам необходимо выполнить следующее:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Фактически, только первые два определения (float и width) необходимы, остальные только для декоративного оформления.

Масштабирование изображения

Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, изображение всегда 136 пикселей ширины и DIV - 25% от окружающего текста. И если вы сделаете окошко меньше, то изображение может не поместиться и вылезти за рамку DIV (попробуйте это!).

Если вы знаете ширину всех изображений в документе, то вы можете добавить минимальную ширину DIV, вот так:

DIV.figure {
  min-width: 150px;
}

Другой способ это масштабировать само изображение. Это то, что мы сделали с изображением справа. Как вы может быть видели, если вы сделаете окно браузера слишком широким - изображение JPEG масштабируется не очень хорошо. Но если это изображение диаграмма или график в SVG формате, то масштабирование работает просто великолепно. Здесь разметка, которую мы использовали:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez и его форт в вечернем солнце
</div>

А это таблица стилей для этого изображения:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).

Размещение описания сверху

Вы даже можете поместить описание сверху изображения, если скажете браузеру, что изображение форматировано как таблица. Просто добавьте это правило в таблицу стилей из предыдущей секции:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

'+' означает что правило действует на элемент P который следует за другим P. Что означает, что условие действует на второй элемент P, который содержит описание картинки.

( Эта техника может привести к багам в некоторых браузерах, особенно в комбинации с масштабированием изображений, в примере выше.)

Изображения в XHTML

Текущие (Январь 2003) предложения для XHTML2 имеют CAPTION элемент, который может быть использован с OBJECT. Если это предложение будет принято, то не будет необходимости использовать DIV и CLASS, и, наконец, в XHTML2, вы сможете писать:

<object data="eiffel.jpg">
  <caption>Масштабированная модель Эйфелевой башни в Парке Мини-Франция</caption>
</object>