Fit image to screen height

Question

I'm trying to scale an image to the screen height. I'm using style="max-height:100%; width:auto; display: block;" to fit it to the screen height, and margin:0px auto; to center it. This work on Chrome browser but don't work on Firefox. I will be grateful for any help

Answer 1

What you are trying to do is fit the image size to the viewport's height, not the screen's.

The viewport is the actual portion of the screen where your app will be rendered (browser window - browser interface).

To achieve that, you could use height: 100vh , where one 1vh is equal to 1% of the viewport's height.

Thus, your image will always be exactly as tall as the viewport, that is the "screen" in your case.

Answer 2

You can set position: fixed for the image.

When set image size will be cropped to fit the size of the viewport.