Проблема
Как мы все знаем, если мы не устанавливаем конкретное значение 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
Десерт на сегодня - видео про то, как один паренек просто решил покататься на велике
Интерактивное сравнение изображений