Responsive Image full screen and centered - maintain aspect ratio, not exceed window

Question

So I want an img to be displayed

• as big as possible (filling the width when it is landscape / height when it is portrait)
• no crop
<

Answer 1

To center it, you can use the technique shown here: Absolute centering.

To make it as big as possible, give it max-width and max-height of 100%.

To maintain the aspect ratio (even when the width is specifically set like in the snippet below), use object-fit as explained here.

.className {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
}