Jump to content

max-width:100%; max-height: 100%; relative to parent?


rain13

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...