Проблема

Как мы все знаем, если мы не устанавливаем конкретное значение  height для элемента, то его высота автоматически корректируется в зависимости от размера содержимого (подробнее о размерах элементов читайте здесь) .

А что, если нам бы хотелось наблюдать схожее поведение атрибута  width ? Например, предположим, что мы оформляем иллюстрации с помощью HTML5, используя примерно такую разметку:
HTML
<p>Some text […]</p>
<figure>
<img src=»adamcatlace.jpg» />
<figcaption>
The great Sir Adam Catlace was named after
Countess Ada Lovelace, the first programmer.
</figcaption>
</figure>
<p>More text […].</p>
Также предположим, что мы применяем какую-то простейшую стилизацию, скажем, создаем рамку вокруг иллюстраций. По умолчанию результат выглядит как на рисунке. Но мы хотим, чтобы ширина иллюстраций была равна ширине содержащихся в них изображений (которые могут быть абсолютно разными), а также чтобы они выравнивались по центру по горизонтали. Текущий вариант визуализации далек от желаемого результата: строки текста намного длиннее изображения.  Читать далее