如何用CSS实现跨浏览器Teaser组件文本增长时自动缩放图片

需求与初始结构 #

我正在用HTML构建一个包含图片和标题的Teaser组件，组件的<div>容器有固定尺寸，但<h1>内的文本长度可能变化。核心要求是文本优先显示：当文本变长时图片自动缩小，且文本不能超出组件容器范围。之前尝试给文本设置position:absolute覆盖图片，但会导致图片被截断。

初始HTML结构如下：

<div>
    <img src="./image.jpg" />
    <h1 contenteditable>Blabla</h1>
</div>

尝试的CSS Grid方案 #

我尝试了CSS Grid布局方案，代码如下：

div {
    width: 300px;
    height: 200px;
    background: red;
    padding: 10px;
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

h1 {
    margin-top: 10px;
    overflow: auto;
}

该方案在Firefox中可以正常实现需求：

但在Chrome中无法达到预期效果：

此外我还尝试过Flexbox布局方案，同样没有效果。虽然可以通过JavaScript动态修改图片高度来解决，但更希望找到纯响应式的CSS解决方案。

内容的提问来源于stack exchange，提问作者Husky