CODEWITHSUNDEEP
htmlcssimagefirefox
Melvin Tiong
Melvin Tiong

Reputation: 13

Firefox: div does not resize width to fit a scaled-down child image

I'm trying to build a horizontal scrolling image gallery, which has a fixed height (e.g. 200px) and a bunch of images (aspect ratio mantained, shrunk to fit 200px height) placed side-by-side in the gallery. If the images exceed the browser width, a horizontal scrollbar for the gallery is provided.

I'm having a problem with getting it to work on Firefox. In Firefox, the div that contains the image will act as if its child image wasn't shrunk, and thus leave lots of white space between images. The gallery works as expected in Chrome and Safari.

I've made a jsfiddle to try and replicate the problem in as little lines as possible - observe it in Firefox vs. another browser.

.container {
    height: 200px; /* Want a fixed height for container. */
    white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
    overflow: auto; /* Want scrollbars on .container. */
}

.container > .element {
    display: inline-block;
    height: 100%;
}

.element > img {
    height: 100%;
}

Am I doing something wrong? Is there any way to get .element to shrink to fit its scaled-down image content?

Note that aside from the image, I'd like a text overlay over the image (not reflected in jsfiddle), which is why I've chosen to enclose the image in a .element div (so that I can give it position: relative and then add an absolutely positioned child overlay to it), and chosen to give it a display of inline-block (so that I can align the child overlay to the bottom of .element).

Upvotes: 1

Views: 3050

Answers (1)

Boris Zbarsky
Boris Zbarsky

Reputation: 35054

You're seeing https://bugzilla.mozilla.org/show_bug.cgi?id=829958

The good news is that this is fixed in Firefox 25. The bad news is Firefox 25 is not shipping until October 28.

As a workaround for now, giving .container > .element a fixed height instead of a percentage height would work... Or alternately give .container a parent that has the overflow style. The key part to work around that bug is to have the fixed height on something that has visible overflow.

Upvotes: 3

Related Questions