chadmichael Posted October 3, 2006 Share Posted October 3, 2006 I have a photo gallery type application that must be robust enought to handle a variety of sizing constraints. The photo's can range in size, as well as the space alotted to them. The main problem is that when the space gets too small in relation to the images, the flow out of the bounds of the containing block. My choices, as I know them, are to use overflow to hide the extra or add scrollbars. Neither of these is a first choice. My preference is to constrain the width of the images so that they never grow larger than the containing block. The following code sample works, but you need to supply your own image that is wider than the 300 pixels set on the containing div. The styling in this example makes the width equal to 100% of the div. So, in the case where the image is too large, it gets scaled down to the size of the div, and my original problem is solved. The new problem is that the width is tied to the size of the containing div and when the image is smaller than the space ( recall that my space changes too, and the fixed number of 300 is only for the example; it could be 500 ) it gets stretched out to that space. This isn't acceptable. What I really need is the to constrain the minimum and maximum dimensions, but this isn't supported by IE as I understand it. I believe I could write some rather intricate javascript to intervene and handle the run time styling of all the elements but that seems like overkill. Any ideas? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>Test Page</title><style type="text/css"> #container {padding: 25px; background-color:lightblue;} #container1 { height: 200px; width:300px; border: 1px blue solid; background-color:cadetblue; } #container1 img {width:100%;} </style></head><body><div id="container"><div id="container1"> <img src="images/wide.jpg"/></div></div></body></html> 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