Масштабируйте изображение с учетом ограничений по ширине и высоте

Question

В настоящее время у меня есть изображение с:

<img src="logo.png" width="100vw">

Как также сделать высоту изображения 80vh, если 80vh превышает 100vw?

Редактировать: На узких устройствах (таких как телефоны), Я хочу, чтобы изображение занимало 100% ширины области просмотра. На более широких устройствах, где 100% ширины области просмотра превышает 80% высоты области просмотра, я хочу, чтобы изображение занимало 80% высоты области просмотра Пример

Answer 1

Вы можете достичь желаемого с помощью media queries, устанавливая точки останова и определяя ориентацию landscape.

Пример:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {

    img {
        width: 100vw;
        height: 80vh;
}