Expansive full screen image proportions

Question

Is there a way to showcase an image on the entire screen without distorting it, while maintaining its aspect ratio in either HTML or Javascript?

The desired outcome is for the image to be centered and:

- Have a height of 100% and a width of x% (where "x" is less than or equal to 100%)

or

- Have a height of y% and a width of 100% (where "y" is less than or equal to 100%)

This type of display would be ideal for a full-screen image viewer web application.

Answer 1

Answer №1

Here's the recommended code snippet:

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

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

Answer 2

Here's the recommended code snippet:

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

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

Answer 3

By setting either the width or height, the other dimension will automatically adjust to maintain the image's aspect ratio.

Answer 4

By setting either the width or height, the other dimension will automatically adjust to maintain the image's aspect ratio.

Answer 5

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

To ensure the container div is precisely positioned on the screen, you can utilize position absolute.

Answer 6

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

To ensure the container div is precisely positioned on the screen, you can utilize position absolute.