От автора: эй! Совершенно новое свойство, которое влияет на размер блока! Это важная вещь. Уже есть много способов создать блок с соотношением сторон (и я бы сказал, что это решение на основе пользовательских свойств является лучшим), но ни один из них не является особенно интуитивным и, конечно, не таким простым, как объявление одного свойства.
Итак, в то время, когда aspect-ratio (MDN, и не путать с версией медиа-запроса) готовится к выходу, я подумал, что полезно рассмотреть, как это работает.
Простое указание aspect-ratio для элемента вычисляет высоту на основе ширины auto
Без явной установки ширины у элемента все еще будет естественная авто width. Таким образом, высота может быть рассчитана из соотношения сторон и ширины рендеринга.
.el { aspect-ratio: 16 / 9;
}
Если содержимое не вписывается при данном соотношении сторон, элемент все равно будет расширяться
Соотношение сторон в этой ситуации игнорируется, что на самом деле приятно. Вот почему тактика псевдо-элементов для соотношений сторон была популярна, она не подвергала нас опасности потери данных или неуклюжего отсечения, когда контента становилось слишком много.
Но если вы хотите ограничить высоту соотношением сторон, вы можете добавить min-height: 0;
Если элемент имеет либо высоту, либо ширину, то неизвестная сторона рассчитывается исходя из соотношения сторон.
Таким образом, aspect-ratio — это в основном способ установить другую сторону, когда у вас есть только одна.
Если элемент имеет как высоту, так и ширину, 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.
.el { aspect-ratio: 1 / 4; height: 500px; /* Игнорируется, потому что width вычисляется в 125px */ /* min-width: 100px; */ /* Соотношение сторон становится 1 / 2 */ /* min-width: 250px; */
}Со значениями функций
Соотношения сторон всегда наиболее полезны в нестабильных ситуациях или в случае, когда вы заранее не знаете одного из размеров. Но даже когда вы не знаете это точно, вам часто нужно задать определенные ограничения. Скажем, 50% — это круто, но вы хотите, чтобы значение не уменьшилось ниже 200 пикселей. Вы можете сделать ширину: max(50%, 200px);. Или задать максимальное и минимальное ограничения clamp(200px, 50%, 400px);.
Кажется, это работает интуитивно:
.el { aspect-ratio: 4 / 3; width: clamp(200px, 50%, 400px);
}Но скажете, что у вас есть размер 200px, а затем вы применили min-width в 300px? min-width имеет приоритет. Это по-прежнему интуитивно понятно, но из-за того, что в расчеты могут быть вовлечены многие свойства, функции и значения, все становится сложным.
Может быть, полезно представлять aspect-ratio, как самый низко приоритетный способ определения размера элемента?
Он никогда не переопределит какую-либо другую информацию о размерах, но он всегда будет задавать ее размеры, если для этого измерения нет другой доступной информации.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.