Css 为什么在Firefox中，最大宽度/高度img不受父级高度/宽度百分比的约束？

我在容器中有一组绝对定位的流体分区，希望在每个分区中显示一个图像，该图像在容器内垂直和水平居中，并尽可能填满可用空间。由于将这些图像用于其他目的，它们必须是img标记，而不是背景图像（否则使用CSS3就很容易了！）

我原以为下面的代码可以做到这一点，但由于某些原因，在Firefox上，图像以其原始维度显示，并且不受父维度的约束。在Chrome中，宽度似乎正确链接到容器，但img高度不受容器高度的约束

如果父元素上没有设置宽度/高度，我可以理解，但是本例中的每个元素都有一个百分比宽度/高度设置，所以我认为这不是问题所在。仅供参考，如果您在img上设置了特定宽度：100%，那么这将正确限制宽度（但不能这样做，因为这意味着它失去了正确的方向），但是即使您将高度设置为100%，它仍然不适用于高度

您可以在上看到一个JSFIDLE，代码如下所示

如果有人能给我指出我做错了什么，我将不胜感激

    body, html, #outer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #container {
        background-color: #ffcc00;
        display: table;
        position: absolute;
        left: 20%;
        top: 30%;
        width: 60%;
        height: 40%;
    }

    #containerinner {
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }

    #containerinner img {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        display: block;
    }

    <div id="outer">
        <div id="container">
            <div id="containerinner">
                <img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0" alt="">
            </div>
        </div>
    </div>

body，html，#外部{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#容器{
背景色：#ffcc00；
显示：表格；
位置：绝对位置；
左：20%；
最高：30%；
宽度：60%；
身高：40%；
}
#集装箱工人{
显示：表格单元格；
宽度：100%；
身高：100%；
垂直对齐：中间对齐；
}
#集装箱装卸工{
最大宽度：100%；
最大高度：100%；
保证金：0自动；
显示：块；
}

干杯

---

Dave

这里的问题是，如果不指定包含元素的高度，则无法设置中间的垂直对齐。在您的情况下，您希望高度相对于视口，这会造成额外的困难

但是，如果我们同时使用CSS3中定义的

vh

（视口高度）和

vw

（视口宽度）单位，我们可以实现您的目标。然后，我假设您希望图像与中心对齐，最大宽度和高度分别为视口的60%和40%。我已将标记缩减为以下内容（）：

#容器{
位置：固定；
顶部：30vh；
左：20vw；
背景色：#ffcc00；
}
#内在的{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
高度：40vh；
宽度：60vw；
}
img{
显示：块；
最大宽度：60vw；
最大高度：40vh；
保证金：0自动；
}

display table Afaik之后不能立即使用display table单元格如果中间包含一个display:table行，也会发生同样的情况：“如果有一个display:table单元格，而其直接父级没有display:table行，则CSS无效”——这是谁说的？（除了你，我的意思是。）这里的关键在于设置

表格布局：fixed

，不需要额外的元素。非常感谢，这解决了垂直对齐和宽度问题，但是img仍然不适合容器的高度？容器应始终为主体/父对象的40%高度，但如果将视口设置得非常短，则可以看到图像强制其高于此高度（即使img应为主体40%的父对象高度的最大100%？@CBroe您是对的-尽管忽略它将是无效的HTML，如果使用匿名元素，则将绘制具有表行样式的匿名元素。“对于连续的内部表和“表标题”同级序列中的每个“表单元格”框C，如果C的父项不是“表行”，则在C和C的所有连续同级（即“表单元格”框）周围生成一个匿名的“表行”框。”（）@deshg I未发现此问题，您使用的浏览器和版本是什么？我在FF、Chrome和IE上也遇到了同样的问题。在小提琴中，如果您使身体区域的高度降低，那么父对象和img的高度似乎不会调整为父对象高度的40%？我已经在真正的浏览器（不仅仅是jsfiddle）上进行了尝试，结果是一样的。由于某种原因，它似乎尊重宽度设置，但不尊重高度（如果我删除了图像，那么当您降低主体高度时，它会正确调整容器的大小）