rain13 Posted June 9, 2015 Share Posted June 9, 2015 Hi, I have noticed that max-width:100%; max-height: 100%; doesn't really force image to fit in in div. In example below, I want to use max-width:100%; max-height: 100%; in order to limit image size. Is there way to do it with html/css only, or should I write javascript that calculates height/width in pixels? <html> <head> </head> <body> <div style="position: fixed; display: table; background: #F00; width:100%; height:100%; left:0px; top:0px;" > <span style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100px; top: 0px; right: 0px; position: absolute;">Close</span> <span style="color: white; width: 100px; top: 0px; position: fixed; left: 0px;">Title of image</span> <div style="vertical-align: middle; display: table-cell; background: #0F0; text-align: center; width:100%;"><img style="max-width:100%; max-height: 100%;" src="http://www.rarepalmseeds.com/images1000/areca-catechu-dwarf.jpg"></div> </div> </body></html> Link to comment Share on other sites More sharing options...
Alatoru Posted June 10, 2015 Share Posted June 10, 2015 You will have to set the max-height and max-width to the width and height of the div. What it means max height 100%? The image itself is at start 100% of it's height. Limiting image height to 100% does nothing. It is already maximum. But if your div is , let's say 400 px and you can say for the image: max-height:400px; And that's it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now