Как мне стилизовать изображение до максимальной высоты в зависимости от его ориентации?CSS

Разбираемся в CSS
Anonymous
Как мне стилизовать изображение до максимальной высоты в зависимости от его ориентации?

Сообщение Anonymous »


Как стилизовать изображение в зависимости от его ориентации? У меня есть список элементов в сетке. До сих пор я использовал только пейзажные изображения, но теперь хочу начать использовать портретные изображения.

Есть ли способ заставить CSS распознавать, если высота изображения больше ширины, и соответственно устанавливать высоту?

Я имею в виду, что я могу установить для max-height фиксированную длину, но изображение будет искажено. Чего я действительно хочу, так это того, чтобы альбомное изображение сохраняло свой размер, а портретное изображение уменьшало его высоту до размера высоты ландшафта.

Есть ли способ сделать это?

Я собирался использовать только CSS. Но это проект Angular, поэтому я могу использовать js, если нет другого способа.

Чтобы быть более понятным, я хочу, чтобы на этих изображениях я использовал max-width: 100%; максимальная высота: 10em; настройка:


Изображение


выглядеть так:


Изображение


Итак, уменьшенное изображение должно иметь возможность появляться в любом месте сетки, а не в том, что есть область уменьшенных изображений и ряд обычных изображений. Они могут располагаться в одном ряду, как показано.

Вернуться в «CSS»