Соотношение сторон

Фиксированная высота работает, но не учитывает ширину: в широкой карточке картинка высотой 192 пикселя — низкая полоса, а в узкой — почти квадрат. Наша карточка никогда не шире 24rem (max-w-sm), но картинки в других местах сайта, например на всю страницу, сильно меняют ширину. Поэтому часто лучше задать картинке форму — соотношение сторон, то есть отношение её ширины к высоте. Это делает свойство CSS aspect-ratio, а высоту браузер вычисляет по ширине:

aspect-ratio: 16 / 9; /* 16 частей в ширину, 9 в высоту */

Чтобы соотношение сторон работало, у элемента не должны быть заданы и ширина, и высота: задаётся одно из них (здесь ширина, w-full), а соотношение вычисляет другое. Если оставить у картинки h-48, соотношение сторон игнорируется.

Вместе с object-cover любой фотографии можно придать нужную форму без искажений. Поэтому у картинок часто встречается такая тройка классов: w-full aspect-video object-cover.