Кроссбраузерный способ автоматического масштабирования изображения при увеличении текста с помощью CSS в тизере ⇐ CSS

[Anonymous]

Я создаю тизерный компонент в HTML, используя изображение и заголовок. Что-то вроде этого:

Код: Выделить всё

[img]./image.jpg[/img]
Blabla

Я знаю точные размеры , но, конечно, текст в может измениться. Я хочу, чтобы текст имел приоритет, и чтобы изображение автоматически уменьшалось, когда текст становится длиннее (текст не должен исчезать из поля). Одним из решений было бы использовать позицию:absolute в тексте и расположить его над изображением, но тогда изображение обрезается.
Я нашел это решение с помощью CSS-сетки:

Код: Выделить всё

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:
[img]https://i.sstatic.net /oz8jpUA4.png[/img]

Но, к сожалению, в Chrome этого нет:


Я пробовал что-то еще с Flexbox, но это тоже не работает. Конечно, я мог бы использовать Javascript для динамического изменения высоты изображения, но мне действительно хотелось бы гибкого CSS-решения.
Я поместил код для этого примера в этот код.

Подробнее здесь: https://stackoverflow.com/questions/785 ... ss-in-a-te