CSS / Lightbox-esque popup/div width issue.

June 25, 2009 9:43 AM

Scaling down div width to fit around image which has been scaled down via its height element??

Hello!

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!!

posted by theRussian to computers & internet (5 comments total)

Are you using JQuery? If so, you can try something like $("#popupdiv").width() to see if it gives you that div's width in pixels and work from there.
posted by ignignokt at 9:47 AM on June 25

@ignignokt No, I'm not using JQuery .. I used .offsetWidth to figure out what the deal was (took FOREVER for me to realize that the width was just being set to the original image). I'll try to see if I can grab the width of the image, and then scale the popup-img accordingly, but was hoping that there was some easier way that I was missing ..
posted by theRussian at 9:51 AM on June 25

Maybe something like this:

For most browsers:
img {max-height 75%;width:auto} (It might be max-width instead of width)

For IE6:
img {max-height: 75%;width:auto}

For the close button, I'd use the clearing fix, or better yet, don't float the div at all, just use text-align:right and margin-bottom. If the container's padding or margin separates it from its borders, use negative margins or position:relative.
posted by clearlydemon at 10:34 AM on June 25

Argh, I screwed up my example. Here it goes again:

For most browsers:
img {max-height: 75%;width:auto} (It might be max-width instead of width)

For IE6:
img {height: 75%;width:auto}
posted by clearlydemon at 10:37 AM on June 25

@clearlydemon - I was about to try the text-align:right and margin-bottom solution for the close button, but I went ahead and tried setting the width based on the offsetWidth, as I mentioned above.

My solution was as follows - in the img tag, I put an onload function - showPopup(). This function sets the popup divs to visible, and then grabs the img.offsetWidth. From that, I set the popup-img div width, which resizes the popup containing it. Not the cleanest solution, but it works.. at least in FF :D
posted by theRussian at 11:03 AM on June 25