Question

<div class="container">
    <img src="..." style="position: fixed; height: 80%;" />
</div>

Image height is set to be proportionate with the window height, how to make it fixed yet centred, also without distorting the images.

Because width of the images also vary with height, can’t just get width and do the ‘left:0; margin-left: -width/2’ trick.

Thanks!

Answer 1

If you are able to use the following styles, it will do the job.

.container {
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
}

img {
    position: relative;
    height: 80%;
}

DEMO: http://jsfiddle.net/9qKsj/