Соотношение сторон компонента
Изображение может загружаться позже текста, но его место желательно понимать до появления пикселей. Кроме исходных атрибутов ширины и высоты, компоненту иногда нужен собственный формат: например, одинаковое широкое окно для разных обложек. Свойство aspect-ratio задаёт предпочтительное соотношение сторон коробки и помогает вычислить недостающий размер.
Прежде чем продолжать, верните каталог из диагностической ленты к сетке. Удалите модификатор course-list--rail, её пояснение, добавленные атрибуты списка и отдельный блок правил ленты. Это состояние после двадцать пятого урока. Теперь результат — самостоятельная рамка обложки с отношением шестнадцать к девяти; текст карточек и таблица не меняются.
Формат компонента и формат источника
Исходная SVG-обложка имеет размеры 640 на 360, поэтому её собственное отношение уже равно шестнадцати к девяти. HTML-атрибуты width и height остаются полезными сведениями для браузера, даже когда CSS уменьшает изображение до ширины карточки. Они описывают исходную геометрию, а не обязательный размер рисунка на каждом экране.
Новая рамка относится к компоненту. Она может требовать такого же широкого формата для картинки с другими исходными пропорциями. Различие источника и рамки станет наблюдаемым в следующем уроке, когда у первого курса появится вертикальная декоративная иллюстрация. Пока используем знакомый источник, чтобы отделить создание коробки от выбора кадрирования.
В index.html у каждой из шести карточек замените одиночный элемент изображения следующей обёрткой. Сохраняйте ту же картинку, пустой alt и исходные числовые атрибуты. Не добавляйте новые карточки и не переносите название внутрь рамки изображения.
<div class="course-media">
<img class="course-cover" src="assets/course-cover.svg" alt="" width="640" height="360">
</div>Выбран div, потому что рамка сама не добавляет отдельную подпись иллюстрации и не требует семантики самостоятельной фигуры. Назначение курса уже выражено заголовком и аннотацией. Декоративная общая картинка не дублирует название в альтернативном тексте. Если позднее источник будет нести существенные сведения, пустой alt нужно будет пересмотреть по новой обязанности.
Один известный размер и отношение
Добавьте следующий полный блок в конец styles.css. В основном каталоге ширину рамки определяет колонка сетки, а высота ещё не задана жёстким числом. Условие ограничивает новое соотношение поддерживаемым свойством; естественная картинка остаётся основой вне этого блока.
@layer components {
.layout-lab .course-media { background: #30323f; min-inline-size: 0; }
.layout-lab .course-media .course-cover { inline-size: 100%; block-size: auto; }
@supports (aspect-ratio: 16 / 9) {
.layout-lab .course-media { aspect-ratio: 16 / 9; }
}
}Рамка ожидается широкой, с высотой, связанной с доступной шириной. Для условной ширины триста двадцать пикселей отношение шестнадцать к девяти даёт сто восемьдесят пикселей высоты. Это мысленный расчёт без реальных рамок и отступов, а не сделанный замер страницы. В нашем элементе нет внутреннего padding или border, которые нужно отдельно учитывать при таком простом сравнении.
Отношение является предпочтительным. Содержимое, минимальные и максимальные размеры, растяжение в сетке и явные значения могут влиять на окончательную коробку. Поэтому нельзя обещать точную высоту для любого сочетания свойств по одному наличию aspect-ratio. В текущей схеме оставляем недостающий размер автоматическим и используем одинаковые широкие источники, чтобы условия были обозримы.
Если одновременно задать рамке явные ширину и высоту, соотношению может уже не остаться обязанности вычислять одну из них. Для диагностического опыта временно задайте block-size конкретным числом и посмотрите, что это уже самостоятельное ограничение. Затем удалите число. Мы сохраняем гибкую геометрию, зависящую от колонки, а не фиксированный прямоугольник для всех окон.
Заменяемый элемент и обычная коробка
Изображение является заменяемым элементом с собственной внутренней геометрией. Обычный div такой картинки внутри себя не имеет, поэтому его отношение берётся из CSS. Это объясняет выбор обёртки: формат компонента задаётся независимо от того, каким окажется конкретный файл. Содержимое изображения затем потребует отдельного правила вписывания в эту коробку.
У aspect-ratio есть сочетание auto с указанным отношением. Для заменяемого элемента оно позволяет учитывать собственное соотношение после появления данных источника, а указанный вариант служит до него. У обычной коробки смысл другой, потому что собственного изображения как внутреннего заменяемого содержимого у неё нет. В основном примере рамке задано только явное отношение, чтобы её формат не менялся вслед за источником.
Обязанность автоматического размера и поведение значения auto описаны в MDN об aspect-ratio. Не делайте вывод о резервировании места из названия свойства: сначала проверьте, какой элемент его получил и какая из сторон может быть вычислена. Настройка на потомке не обязательно задаёт нужную геометрию внешней рамке.
Наш общий box-sizing: border-box также остаётся частью расчёта. Если добавить рамке границу и внутреннее поле, нужно понять, к какой коробке относится заданное отношение. Например, фиксированная общая ширина с толстой рамкой оставит рисунку меньше внутреннего пространства. Вместо случайной правки отношения полезнее отделить наружную геометрию компонента от коробки изображения.
Содержание не обязано помещаться само
В этом шаге изображение продолжает использовать block-size: auto. Его широкие исходные пропорции совпадают с выбранной рамкой, поэтому ожидается привычный вид. При замене на вертикальный источник естественная высота картинки может оказаться больше рамки и повлиять на размер или переполнение. Само отношение контейнера не является инструкцией обрезать пиксели потомка.
Это важная граница урока. Резервировать формат и выбрать кадрирование — две разные операции. Не добавляйте overflow: hidden на всю карточку только для сокрытия выхода картинки: тогда можно обрезать и текст, и фокус ссылки. Если требуется ограничение рисования изображения, оно должно относиться к его собственному компоненту с понятным способом вписывания.
При отсутствии поддержки условного блока сохраняется обычная обложка с width, height, доступной CSS-шириной и автоматической высотой. Карточка может иметь другое распределение места, но курс и ссылка не исчезают. Это более узкое и проверяемое обещание, чем полное визуальное совпадение во всех движках. В конце курса отдельно покажем простой файл без современных группировок CSS.
Для самостоятельного опыта временно замените отношение рамки на единицу к единице. Ожидается изменение предпочтительного формата коробки, но не мгновенное изменение исходного SVG. Затем верните шестнадцать к девяти. Так видно, что CSS управляет местом размещения, а содержание файла остаётся прежним.
Перед выпуском нужно позже проверить состояние с медленным или отсутствующим изображением и увеличенным текстом. Не утверждаем, что этим уроком уже уменьшен CLS или измерена скорость: никаких браузерных замеров здесь не проводилось. Мы подготовили ясную геометрию компонента, на которую в следующем уроке наложим отдельные правила содержимого картинки.
Полное состояние этого шага находится в layout-lab/lesson-27 внутри исходников продолжения. Каждый снимок открывается отдельно; подключать CSS разных уроков одновременно не нужно.