Будьте в курсе последних событий, подпишитесь на обновления сайта

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

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

Проблема

Как мы все знаем, если мы не устанавливаем конкретное значение  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

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: