HTML - display an image as large as possible while preserving aspect ratio

Question

I\'d like to have an HTML page which displays a single PNG or JPEG image. I want the image to take up the whole screen but when I do this:

Answer 1

The easiest way to do so (if you don't need to support IE) is setting the object-fit CSS property to contain:

img { object-fit: contain; }

See also:

• https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• https://caniuse.com/#search=object-fit