URL example where we can see that?

Have you checked your zoom controls.

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

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

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

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.

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.

Thanks jscher.

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

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.