CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Umer Farooq
Umer Farooq

Reputation: 7486

Image resize not working in FireFox

I have an 1080p image which I included in my code. The code works fine on Chrome, however there are issues on Firefox. In firefox image height is not working, which eventually makes the picture to take the whole screen.

I tried different solutions but couldn't solve this problem. I might have missed a few solutions.

Here is the code:

#container{
    width:auto;
    height:60%;
    margin: 0 auto 0 auto;

}


#titleImage{

        max-width:100%;
        max-height:90%;
        width:100%;
}


<body>

   <div id="container">
        <img id="titleImage" src="throne.jpg" />
    </div>

I am trying to achieve similar height for the image on all browsers like this site.

Regards

Upvotes: 1

Views: 531

Answers (1)

BlueIceDJ
BlueIceDJ

Reputation: 766

The image is different in Firefox because you set the height to a percentage. Different browsers will have a different browser height even in full screen due to the GUI around the page you are viewing (this is the graphical user interface that shows you the URL bar/favorites/etc.

You really shouldn't set the height as a percentage. Try instead something like this

#container{
    width: 60%;
    height: auto;
    margin: 0 auto;
}

adjust the width to what you desire. Using the JSFiddle Chanckjh created it would be at 70%. As you can see in the updated JSFiddle the problem is fixed between browsers.

http://jsfiddle.net/m6VBz/19/

Hope this helped!

Upvotes: 1

Related Questions