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

After a lot of trial and error I found this solved my problems. This is used to display photos on TVs via a browser.

• It Keeps the photos aspect ratio
• Scales in vertical and horizontal
• Centers vertically and horizontal

• The only thing to watch for are really wide images. They do stretch to fill, but not by much, standard camera photos are not altered.

  Give it a try :)

*only tested in chrome so far

HTML:

CSS:

.frame {
  border: 1px solid red;

  min-height: 98%;
  max-height: 98%;
  min-width: 99%;
  max-width: 99%;

  text-align: center;
  margin: auto;
  position: absolute;
}
img {
  border: 1px solid blue;

  min-height: 98%;
  max-width: 99%;
  max-height: 98%;

  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}