Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lightroom photogalleries in cropped in Firefox.

more options

I have created a number of galleries with LR and then inserted them in existing web pages in my web site. While the galleries work fine in both Chrome and IE, there is a problem with the Firefox browser. Thumbnails show fine but when enlarging the photo it is cropped and thus only part of it is shown. I have tried inserting the gallery using both an Iframe and as an object/embed, same result, fine in Chrome and IE but individual photos cropped in Firefox.

Any solution to this?

I have created a number of galleries with LR and then inserted them in existing web pages in my web site. While the galleries work fine in both Chrome and IE, there is a problem with the Firefox browser. Thumbnails show fine but when enlarging the photo it is cropped and thus only part of it is shown. I have tried inserting the gallery using both an Iframe and as an object/embed, same result, fine in Chrome and IE but individual photos cropped in Firefox. Any solution to this?

Chosen solution

The embedded page uses some style rules to override the normal display behavior. There probably are aesthetic reasons for this that I'm not aware of, but cumulatively, they cause the div elements around the image to ignore the 100% width setting.

(1) #loupeContainer div.image-container {display: table}

Tables are inherently stretchy and will expand to fit their contents despite a width:100% unless this rule also is set:

table-layout:fixed

(2) #loupeContainer div.image-container div.image {display: table-cell}

Same as #1, but the fixed rule needs to be on the display:table element.

(3) #loupeContainer div.corners {display: inline-block}

The image doesn't shrink to fit when this is changed from the default display of block to inline-block


What puzzles me is that it works outside the iframe, i.e., when opened stand-alone in a separate tab. I think my only suggested workaround would be to shorten the height of the iframe so it is more of a 4:3 shape than a 1:1 shape.

Read this answer in context 👍 1

All Replies (8)

more options

URL example where we can see that?

more options

Have you checked your zoom controls.

<Control> + (plus) enlarge <Control> - (minus) reduce <Control> 0 (zero) restore

more options

NielsE said

I have created a number of galleries with LR and then inserted them in existing web pages in my web site. While the galleries work fine in both Chrome and IE, there is a problem with the Firefox browser. Thumbnails show fine but when enlarging the photo it is cropped and thus only part of it is shown. I have tried inserting the gallery using both an Iframe and as an object/embed, same result, fine in Chrome and IE but individual photos cropped in Firefox. Any solution to this?

An example can be found in the following url: http://www.nielsenevoldsen.eu/L%27Amarante/Pages/ConstrDetails/AmaranteConstrDetailsEN.html

more options
more options

I see what you are referring to - it looks like the image is too large for the frame that you have it set in. Not affected by page zoom, either. Approx 10% of the right side of the image is lopped off on my 1600 x 900 monitor, and amount that is lost stays consistent when I "minimize" the browser window and drag it smaller (along with zooming as I already mentioned).

Looks like a webpage development issue and differences between how the different browser engines handle your code. Beyond the scope of this forum, although someone here may have some suggestions to correct it for Firefox / Gecko during the upcoming week.

Modified by the-edmeister

more options

Chosen Solution

The embedded page uses some style rules to override the normal display behavior. There probably are aesthetic reasons for this that I'm not aware of, but cumulatively, they cause the div elements around the image to ignore the 100% width setting.

(1) #loupeContainer div.image-container {display: table}

Tables are inherently stretchy and will expand to fit their contents despite a width:100% unless this rule also is set:

table-layout:fixed

(2) #loupeContainer div.image-container div.image {display: table-cell}

Same as #1, but the fixed rule needs to be on the display:table element.

(3) #loupeContainer div.corners {display: inline-block}

The image doesn't shrink to fit when this is changed from the default display of block to inline-block


What puzzles me is that it works outside the iframe, i.e., when opened stand-alone in a separate tab. I think my only suggested workaround would be to shorten the height of the iframe so it is more of a 4:3 shape than a 1:1 shape.

more options

Thanks jscher.

Changing the frame to the ratio 4:3 actually worked.

more options

Thanks for the confirmation. It's hard to tell whether playing around with settings in the Inspector tool will work in real life so I'm glad to hear it did.