Размер шрифта должен составлять 100% ширины контейнера [дубликат] ⇐ Html

[Anonymous]

У меня есть задача по дизайну/CSS, и мне нужен кто-нибудь, чтобы поделиться некоторыми идеями. Дело в том, что у меня должен быть тизер-компонент, который на 50% состоит из текста (контента) и на 50% из изображения. Текстовое содержимое должно содержать преамбулу и под ней h1, который должен динамически устанавливать размер шрифта, занимающий 100% ширины контейнера. Я думаю, можно ли это сделать, используя контейнерные запросы для контейнера текстового содержимого? Однако проблема в том, что h1 выходит за пределы контейнера или не занимает весь контейнер.
Напишите код, который у меня есть на данный момент, ссылку на codepen или, если хотите, код ниже
HTML:

Header

Test







CSS:
.container {
display: flex;
}

.content-wrapper {
background-color: tomato;
width: 100%;
padding: 5rem;
color: white;
}

.content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
container: content / inline-size;
}

.img {
height: 100%;
width: 100%;
}

.img img {
width: 100%;
height: 100%;
object-fit: cover;

aspect-ratio: 4 / 3;
}

@container content (width > 100px) {

h1 {
font-size: 100cqb;
color: yellow;
margin-bottom: 0;
word-break: no-break;
outline: 1px solid pink;
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -container