CSS / Lightbox-esque popup/div width issue.
June 25, 2009 9:43 AM Subscribe
Scaling down div width to fit around image which has been scaled down via its height element??
posted by theRussian to computers & internet (5 answers total)
I have a simple lightbox type popup on my site, with an opaque overlay and a content "whitebox". Upon clicking a thumbnail, the popup/overlay divs are made visible and an img tag is placed into the popup (into a div named popup-img, there's another div which holds the close button in the popup). I have scaled the image height to fit into the popup, which takes up 75% of the screen. So, recap: popup height = 75%; popup-img div height = 100%, and the height of the img tag itself is also set to 100%. The problem I am facing, in FF and IE (not Safari, though) is that the width popup-img div (into which the img tag is written via JS) is staying the width of the original width of the image - not the new scaled width (scaled due to scaling down the height).
Is there anyway to get the width of the popup div to fit to the new width of the image? This isn't so much of a problem when the original image height is greater than will fit in the box, and scaled, but when the image height is smaller, it gets scaled 'up', but the width of the pop-up stays to fit the original width, and the image goes outside of the popup width-wise.
Sorry if this is a confusing explination - it is confusing to me as well.
Other posibly helpful/hurtful info - the other div inside the popup is the close button - which is floated to the top right. What I would like to happen, ideally - is for the image to be on the left, and the close button on the right, with whitespace under the button. Don't know if there's anyway that working with this element will help.
I can provide more clarification, and possibly a link to the code in question, if someone is interested in helping me out :D
Thanks ahead of time!!