css - Simple responsive vertical image gallery with 80% viewheight / 100% width -
or thought that easy. wanted keep simple work in browsers, no javascript. ended css works in chrome/safari/ios not in internet explorer, , seems behave weird on android well: img { max-width: 100%; max-height: 80vh; -o-object-fit: contain; /* these lines prevent distortion on chrome/safari */ object-fit: contain; width: 2000px; /* seems needed make small images bigger, creates distortion on ie */ } the basic idea have simple gallery ever works on mobile phones , in normal browser. idea images should not bigger 80% of view height, , never more 100% of width. still take space possible , still maintain aspect ratio. the idea behind 80% viewheight notices there multiple pictures. the page/content consists of <img><br/> tags images of different sizes , dimensions. nothing exiting. with simple max-width/max-height seems work, except small pictures never bigger. how work on browsers? simple question have simple css answer? edit: added reproduction we...