在FireFox中高度100%折叠的内联块隐藏图像

Question

我的CSS问题只在FireFox中可见(cur.ver.31).我正在尝试制作一个响应式布局,带有一排图像(带有链接),这些图像居中,并且具有与视口宽度相同的高度和比例.我的方法是创建一个具有固定宽高比的容器,并将图像放在里面(每个图像在一个单独的<a>标签内),居中,然后将它们的高度缩放到容器高度.它在FireFox中除外,效果很好.要做到这一点我申请display: inline-block; height: 100%到<a>标签和height: 100%; width: auto以<img>标签.对于某些(未知)原因,FF没有<a>正确计算标签的宽度(当它包含上述<img>标签时)并且它水平折叠.结果是,所有<a>具有0宽度的所有宽度彼此非常接近(仅由白色空间分开),并且图像彼此重叠.我display: block; float: left;在<a>标签上得到了相同的结果.

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;

}

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>

Answer 1

我认为这就是你想要做的。演示 .block 上没有宽度，.block img 上没有自动。
它需要是百分比。

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

}