Html 如何在可变高度容器中显示完整图像大小，并在图像上方显示元素

我有一个动态高度容器（其高度在相对测量值中指定），容器内部有两个元素-一个

标题

，一个

img

，例如：

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

标题

我希望图像能完整地显示出来。它的css设置为

高度：100%

由于页眉的高度，图像被剪裁得稍微低一点（它有一个隐藏的溢出边），我希望它的高度能够自动调整（变小）以适应容器内部

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

有一个解决方案，我使用

calc（100%-[header高度]）

作为图像的

高度

，但由于并非所有浏览器都支持

calc

，我想知道是否有其他更受支持的解决方案

下面是一个JSFIDLE:

---

（将类

fix

应用于容器以应用

calc

fix）

也许CSS flex可以作为您的解决方案：

使用

flex方向：列

并对容器应用

max width

（允许图像填充标题文本后的剩余高度，同时不拉伸宽度）可能会解决您的问题，但可能会导致更多问题，具体取决于您最终的目标

---

另一种选择： 应用<代码>高度：7%至收割台和

高度：93%到图像


使剪辑发生在图像的顶部而不是底部：

应用<代码>位置：绝对到标题，给它一个
背景：白色和<代码>宽度：100%，然后应用
位置：相对，以便页眉对容器而不是主体应用100%的宽度。
如果您只希望图像在其容器收缩时收缩，可以将其最大宽度设置为100%，这样可以防止图像增长过大，超过其容器

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

可能需要注意的是，声明
height:100%
并不会使元素达到其容器高度的100%，而是使元素达到其自身固有高度的100%。元素的高度由其内容决定，而不是相反。请在此处阅读完整的解释：

是否有使用flex但不使用calc的浏览器？在第二个选项（百分比+百分比）中，一旦调整窗口大小，图像将与标题重叠。在“其他选项”中，一旦调整窗口大小，图像就会被剪裁。除非有一个纯HTML/CSS解决方案，否则图像会被剪裁吗？这不会导致图像的高度缩小。它仍然保持溢出和剪辑。。。其目的是确保整个图像将显示在容器中，在其尺寸范围内…因此您希望图像尺寸扭曲？不，应保持比例，但高度应为标题和容器底部之间的空间。使用
fix
类查看它-这正是我想要的，我只是在寻找另一种方法，而不是使用
calc