Find solution
How to set fancybox height and width identical?

CSS / Lightbox-esque popup/div width issue.

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

  • Answer:

    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.

theRussian at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

@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 ..

theRussian

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 http://www.positioniseverything.net/easyclearing.html, 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.

clearlydemon

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}

clearlydemon

@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

theRussian

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.