Как стилизовать изображение в зависимости от его ориентации? У меня есть список элементов в сетке. До сих пор я использовал только пейзажные изображения, но теперь хочу начать использовать портретные изображения.
Есть ли способ заставить CSS распознавать, если высота изображения больше ширины, и соответственно устанавливать высоту?
Я имею в виду, что я могу установить для max-height фиксированную длину, но изображение будет искажено. Чего я действительно хочу, так это того, чтобы альбомное изображение сохраняло свой размер, а портретное изображение уменьшало его высоту до размера высоты ландшафта.
Есть ли способ сделать это?
Я собирался использовать только CSS. Но это проект Angular, поэтому я могу использовать js, если нет другого способа.
Чтобы быть более понятным, я хочу, чтобы на этих изображениях я использовал max-width: 100%; максимальная высота: 10em; настройка:

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

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