Full full screen ratio

Question

How can I display an image that fills the entire screen (HTML or Javascript) but doesn't stretch or distort, it maintains aspect ratio.

So it will be centered and either:

You have 100% height and width x% (where "x" is less than or equal to 100%)

or

Are y% high and 100% wide (where "y" is less than or equal to 100%)

For something like a full screen web image viewer.

+3

Albert renshaw 02 nov. 14 at 22:08

3 answers

Just set one of width or height, and the other will be set automatically according to the aspect ratio of the image.

+1

nicael 02 nov. 14 at 22:12

html {
  margin: 0;
  padding: 0;
}
.container {
  max-width: 100%;
}
.img-class {
  max-width: 100%;
  height: auto;
  position: relative;
}

You can set the container div to be exactly positioned on the screen, using absolute position if necessary.

+1

Sachin kanungo 02 nov. 14 at 22:34

God is good · Accepted Answer · 2014-11-02T22:14:38+0000

Use this:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
div {  
    height: 100%;
}

img {
max-width: 100%;
max-height: 100%;
}