Question

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

我原本认为以下代码应该这样做但由于某些原因在Firefox上，图像显示在其原始尺寸中，并且不受父尺寸的约束。在Chrome中，宽度似乎正确地链接到容器，但img高度不受容器高度的限制。

我可以理解，如果在父级上没有设置宽度/高度，但是此示例中的每个元素都设置了百分比宽度/高度，所以我不认为这是问题所在。仅供参考，如果你设置一个特定的宽度：img上的100％然后这会正确地限制宽度（但是不能这样做，因为它意味着它失去了正确的方面）但是它仍然无法正常工作即使您将高度设置为100％，也可以使用高度

您可以在http://jsfiddle.net/deshg/xrzk084d/看到一个jsfiddle，代码在下面。

如果有人能够指出我正确的方向，我会做出错误的事情，我将不胜感激！

    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>

干杯，

戴夫

Answer 1

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

但是，如果我们同时使用CSS3中定义的vh（视口高度）和vw（视口宽度）单位，我们就可以实现您所追求的目标。我假设您希望图像居中对齐，最大宽度和高度分别为视口的60％和40％。我已将标记缩减为以下内容（ See JSFiddle ）：

#container {
  position: fixed;
  top: 30vh;
  left: 20vw;
  background-color: #ffcc00;
}

#inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 40vh;
  width: 60vw;
}

img {
  display: block;
  max-width: 60vw;
  max-height: 40vh;
  margin: 0 auto;
}

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

为什么最大宽度/高度img不受Firefox中父百分比高度/宽度的限制？

1 个答案: