Question

我有一个动态高度的容器（其高度在相对测量中指定），在其内部，有两个元素 - 一个header和一个img，例如：

<div class="item">
    <header><h1>Title</h1></header>
    <img ... />
</div>

我希望图像完整显示。它的css设置为height:100%。
由于标题所采用的高度，图像会被略微剪切（它有一个隐藏的溢出边缘），我想让它的高度自动调整（变小）以适应容器内部。

有一个解决方案，我使用calc(100%-[height of header])作为图片的height，但由于所有浏览器都不支持calc，我想知道如果有更多支持的解决方案。

（将类fix应用于容器以应用calc修正）

Answer 1

也许CSS flex可能是你的解决方案： http://jsfiddle.net/7xLo7mr6/9/

使用flex-direction: column;并将max-width应用于容器（允许图像填充标题文本后的其余高度而不拉伸宽度）可能会解决您的问题，但可能根据你最终的追求，你会遇到更多麻烦。

另一种选择：http://jsfiddle.net/7xLo7mr6/11/ 将height: 7%;应用于标题，将height: 93%;应用于图像

使剪辑发生在图像的顶部而不是底部： http://jsfiddle.net/7xLo7mr6/13/

将position: absolute;应用于标题，为其添加background: white;和width: 100%;，然后将position: relative;应用于容器，以便标题将宽度100％应用于容器而不是身体。

Answer 2

如果你只是希望图像在容器缩小时收缩，你可以给它一个100％的最大宽度，这将阻止你的图像变得如此之大，超过它的容器。

.item img {
    height: 100%;
    max-width: 100%;
}

重要的是要注意，声明height: 100%不会使元素占其容器高度的100％，这使它们成为自身固有高度的100％。元素的高度取决于它们的内容，而不是相反。请在此处阅读完整说明：https://stackoverflow.com/a/5658062/4504641。