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

so want img displayed

• as big possible (filling width when landscape / height when portrait)
• no crop
• no skew or stretch (original aspect ratio)
• centred both vertically , horizontally

also, image's original size not known.

i've tried quite few different options this, including flexbox 1 (to vertical center), nothing seems tick boxes.

ideally i'd css solution of course, have been looking js well.

thanks

jsfiddle demo

to center it, can use technique shown here: absolute centering.

to make big possible, give max-width , max-height of 100%.

.classname {     position: fixed;     top: 0;     bottom: 0;     left: 0;     right: 0;     max-width: 100%;     max-height: 100%;     margin: auto;     overflow: auto; }