Inline-block conainting image with height 100% collapsing in FireFox

Question

I have a problem with CSS that's only visible in FireFox (cur.ver. 31). I am trying to make a responsive layout, with a row of images (with links), that are centered, and having the same height and scale with the viewport width. My approach is to create a container with a fixed aspect ratio, and place the images inside (each image inside a separate <a> tag), center them, and scale their heights to the container height. It's working great, except in FireFox. To achieve this I applied a display: inline-block; height: 100% to <a> tag and height: 100%; width: auto to <img> tags. For some (unknown) reason FF is not calculating the width of the <a> tag correctly (when it contains described above <img> tag) and it collapses horizontally. The result is, that all <a> with 0 width are placed very close to each other (separated only by white spaces), and the images overlap each other. I get the same result with display: block; float: left; on <a> tags.

The CSS

.container-ratio {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 10%;
    background: #ddd;
}
.container-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddf;
    text-align: center;
}
.block {
    display: inline-block;
    height: 100%;
    background: #f00;
}
.block img {
    height: 100%;
    width: auto;
    display: block;

}

The HTML

<div class="container-ratio">
    <div class="container-inner">
        <a class="block">
            <img src="http://placehold.it/100x80/42bdc2/FFFFFF&text=No1">
        </a>
        <a class="block">
            <img src="http://placehold.it/150x80/242bdc/FFFFFF&text=No2">
        </a>
        <a class="block">
            <img src="http://placehold.it/200x80/c242bd/FFFFFF&text=No3">
        </a>
    </div>
</div>

Mien

Answer 1

I think this is what your trying to do. Demo You had no width on .block and auto on .block img.
It needs to be percentages.

.container-ratio {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 10%;
    background: #ddd;
}
.container-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddf;
    text-align: center;
}
.block {
    display: inline-block;
    width:20%;
    height: 100%;
    background: #f00;
}
.block img {
    height: 100%;
    width:100%;
    display: block;

}

Spectroradiometer

I have the same issue. Adding a width: 20%; on the .block force every image to be exactly 20% width and 100% height. It's ok if every image has the same ratio. Otherwise It will stretch them. The wanted behaviour (tested and working on Chrome and Safari) is to force height and let image take as much width as they need to be displayed correctly. – Wallen

Answer 2

It's been nearly two years since this question was asked, and Firefox still exhibits this behavior. So, for anyone in the same situation, here's a solution (only tested on Chrome 49.0 and Firefox 45.0.1).

Edit:

Originally, I used inline wrapper divs and two instances of the images, one of which was not displayed and only served as a dummy. It appears this is not necessary, as can be seen here.

All in all, it seems you can't use inline-block that way in Firefox, but all you need to do to get what you want is leave the anchors and images as inline elements. As long as the anchor's parent is a block-level element other than inline-block, and its height is specified, then you'll get the intended result.

If, for some reason, inline-block is really needed, I don't see how to work around this problem.

Note:

Beware of the "font-size: 0;" on the .block class, used to remove spaces between the images. Without this, images are seperated by whitespaces that behave like links. If the images need some space between them, adding some right or left margin as in the fiddle would be a solution.

Also, though the .block class name is no longer appropriate, I left it to stay consistent with the OP.

The modified CSS

.container-ratio {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 10%;
    background: #ddd;
}
.container-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddf;
    text-align: center;
}
.block {
    font-size: 0;
}
.block img {
    height: 100%;
    margin-right: 1%;
}

Weitzman