Scale image responsively with restrictions on both width and height

Question

Currently I have an image with:

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

How do I also make the image's height 80vh if 80vh is more than 100vw?

Edit: On narrow devices (such as phones), I want the image to occupy 100% of the viewport width On wider devices where 100% of the viewport width exceeds 80% of the viewport height, I want the image to occupy 80% of the viewport height Example

Answer 1

You can achieve what you want with media queries setting the breakpoints and define the landscape orientation.

Example:

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

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