Гибкий размер шрифта на основе доступной высоты контейнера и длины содержания ⇐ CSS

[Anonymous]

У меня есть гибкий контейнер, содержащий изображение и подпись. Я хочу, чтобы изображение было показано как можно большим. Таким образом, заголовок должна расти (до максимума) и сокращаться (до 0, если нет содержания). Теперь, чтобы убедиться, что текстовое содержимое подходит, даже если текстовый контейнер достигнет своей максимальной высоты, я хочу, чтобы размер шрифтов был динамичным. В идеале я хочу как можно больше текста (до максимума), но сокращается, чтобы соответствовать контенту, если текстовый контейнер достиг его максимума. Если текстовое содержимое не так длинное (например, только H1) размер шрифта должен быть в самом крупном, и текстовый контейнер должен сжиматься, чтобы приспособиться к контенту, если хотите. Любые указатели были бы очень оценены < /p>
ta! < /P>

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
height: 100%;
}

.container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}

.image-container {
flex: 1 0 1px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #00000010
}

.image-container img {
height: 100%;
width: auto;
object-fit: cover;
display: block;
}

.text-container {
flex-grow: 0;
flex-shrink: 0;
flex-basis: clamp(0px, min-content, 20%);
/*font-size: clamp(1rem, 3cqh, 3.4rem);*/
padding: 20px;
overflow: hidden;
}

.text-container:empty {
padding: 0;
}

.text-container p,
h1 {
font-size: clamp(0.5em, 4cqh, 4em);
}< /code>


[img]https://www.fz09.org/attachments/img_0070-jpg.139386/[/img]

Instruction
Undo the bolts. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur cursus gravida sodales. Duis condimentum diam suscipit, molestie nisl eu, tempor sapien. Pellentesque auctor justo et quam rhoncus eleifend. Fusce bibendum lacus in sapien interdum vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus gravida sodales. Duis condimentum diam suscipit, molestie nisl eu, tempor sapien. Pellentesque auctor justo et quam rhoncus eleifend. Fusce bibendum lacus in sapien interdum vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Подробнее здесь: https://stackoverflow.com/questions/795 ... ent-length