Первый взгляд на aspect-ratio

Первый взгляд на aspect-ratio

От автора: эй! Совершенно новое свойство, которое влияет на размер блока! Это важная вещь. Уже есть много способов создать блок с соотношением сторон (и я бы сказал, что это решение на основе пользовательских свойств является лучшим), но ни один из них не является особенно интуитивным и, конечно, не таким простым, как объявление одного свойства.

Итак, в то время, когда aspect-ratio (MDN, и не путать с версией медиа-запроса) готовится к выходу, я подумал, что полезно рассмотреть, как это работает.

Простое указание aspect-ratio для элемента вычисляет высоту на основе ширины auto

Без явной установки ширины у элемента все еще будет естественная авто width. Таким образом, высота может быть рассчитана из соотношения сторон и ширины рендеринга.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Первый взгляд на aspect-ratio

Демонстрация

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

Но если вы хотите ограничить высоту соотношением сторон, вы можете добавить min-height: 0;

Первый взгляд на aspect-ratio

Демонстрация

Если элемент имеет либо высоту, либо ширину, то неизвестная сторона рассчитывается исходя из соотношения сторон.
Таким образом, aspect-ratio — это в основном способ установить другую сторону, когда у вас есть только одна.

Первый взгляд на aspect-ratio

Демонстрация

Если элемент имеет как высоту, так и ширину, aspect-ratio игнорируются. Сочетание явной высоты и ширины «сильнее», чем соотношение сторон.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Первый взгляд на aspect-ratio

Факторинг в min-*и max-*

Всегда существуют пересечение между width, min-width и max-width (или версия height). Одно из них всегда «выигрывает». Как правило, это довольно интуитивно понятно.

Если вы установите width: 100px; и min-width: 200px; то min-width будет иметь приоритет. Итак, min-width либо игнорируется, потому что у вас большее значение, либо имеет приоритет. То же самое касается max-width: если вы установите, width: 100px; а max-width: 50px; то max-width имеет приоритет. Итак, max-width либо игнорируется, потому что у вас уже меньшее значение, либо имеет приоритет.

Похоже, что здесь действует общая интуитивность: свойства min-* и max-* либо имеют приоритет, либо не оказывают влияния на макет. И если они имеют приоритет, они сломают aspect-ratio.

Со значениями функций

Соотношения сторон всегда наиболее полезны в нестабильных ситуациях или в случае, когда вы заранее не знаете одного из размеров. Но даже когда вы не знаете это точно, вам часто нужно задать определенные ограничения. Скажем, 50% — это круто, но вы хотите, чтобы значение не уменьшилось ниже 200 пикселей. Вы можете сделать ширину: max(50%, 200px);. Или задать максимальное и минимальное ограничения clamp(200px, 50%, 400px);.

Кажется, это работает интуитивно:

Но скажете, что у вас есть размер 200px, а затем вы применили min-width в 300px? min-width имеет приоритет. Это по-прежнему интуитивно понятно, но из-за того, что в расчеты могут быть вовлечены многие свойства, функции и значения, все становится сложным.

Может быть, полезно представлять aspect-ratio, как самый низко приоритетный способ определения размера элемента?

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

Автор: Chris Coyier

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий