Определение размера содержимого

Определение размера содержимого

Проблема

Как мы все знаем, если мы не устанавливаем конкретное значение  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>
Также предположим, что мы применяем какую-то простейшую стилизацию, скажем, создаем рамку вокруг иллюстраций. По умолчанию результат выглядит как на рисунке. Но мы хотим, чтобы ширина иллюстраций была равна ширине содержащихся в них изображений (которые могут быть абсолютно разными), а также чтобы они выравнивались по центру по горизонтали. Текущий вариант визуализации далек от желаемого результата: строки текста намного длиннее изображения.

Как же сделать так, чтобы ширина иллюстрации определялась шириной содержащегося в ней изображения, а не шириной родительского элемента?  За время своей карьеры вы наверняка успели составить собственный список CSS-стилей, которые приводят к такому поведению свойства  width, чаще всего в качестве побочного эффекта: если мы сделаем элемент  <figure> плавающим, то это даст нам нужную ширину, но кардинальным образом изменит макет иллюстрации, что нам, скорее всего, совершенно не нужно; установка свойства  display: inline-block для иллюстрации позволяет определять ее размер в зависимости от ее содержимого, но не так, как нам бы этого хотелось.

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

Нам понадобилось бы применить  textalign: center к ее родительскому элементу и  text-align: left к любым другим возможным потомкам этого родительского элемента ( p,  ul,  ol,  dl, …); в качестве последнего средства разработчики часто прибегают к установке фиксированного значения width или  max-width для иллюстраций и применению  max-width: 100% к  figure > img .

Однако это приводит к неэффективному расходованию доступного пространства, может давать уродливые результаты для слишком маленьких иллюстраций, а также не адаптивно. Существует ли достойное решение этой проблемы на чистом CSS или же нам следует сдаться и приступить к кодированию сценария, динамически устанавливающего ширину иллюстраций?

Решение

Относительно новая спецификация, CSS Intrinsic & Extrinsic Sizing Module Level 3, определяет несколько новых ключевых слов  width и  height, одним из самых полезных среди которых является  min-content. Это ключевое слово дает нам ширину самого большого неразделяемого элемента внутри поля (то есть самое широкое слово или изображение либо поле фиксированной ширины). Это в точности то, что нам требуется!

Теперь задать для наших иллюстраций подходящую ширину и высоту, выровняв их по горизонтали, можно с помощью всего лишь двух строк кода:
figure {
width: min-content;
margin: auto;
}
Результат вы можете видеть на рисунке.

Для обеспечения изящного обходного пути в старых браузерах эту технику можно объединить с установкой фиксированного значения  max-width , например так:
figure {
max-width: 300px;
max-width: min-content;
margin: auto;
}
figure > img { max-width: inherit; }

В современном браузере второе определение  max-width замещает первое, но если размер иллюстрации определяется изнутри, то  max-width: inherit не оказывает никакого эффекта.

ПОПРОБУЙТЕ САМИ!

http://play.csssecrets.io/intrinsic-sizing