Aspect Ratio CSS

by ananyaneogi

HTML

<img id="img" src="http://placekitten.com/1600/900">

CSS

#img {
    display: block;
    margin: auto;
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio: 8/5) {
    #img {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}