Я пытаюсь добиться отзывчивости пользовательского интерфейса, как показано ниже.

Мой код для этого:
Всё о нашем
НАЗВАНИЕ КОЛЛЕКЦИИ
Lorem Ipsum стал стандартным текстом-пустышкой в отрасли с тех пор, как 1500-е годы, когда неизвестный печатник взял камбуз и перешифровал его. сделать типовой образец книги. Оно пережило не только пять столетий, но и скачок в электронную верстку, оставаясь по существу без изменений. Lorem Ipsum стал стандартным фиктивным текстом в отрасли. еще с 1500-х годов, когда неизвестный печатник взял галеру типа и переделал его, чтобы сделать типовую книгу. Оно сохранилось не всего пять столетий, но и скачок в электронную верстку, оставаясь практически неизменным
И я сделал все, кроме отзывчивости изображения. Когда я уменьшаю окно просмотра, я хочу, чтобы размер изображения был изменен без обрезки. Но когда я устанавливаю для objectFit значение contain, изображение не получает указанную мной высоту и не заполняет всю ширину представления в соответствии с дизайном. В опции обложка: Это не изменение размера. Также я хочу, чтобы над ним располагался текст «ИМЯ КОЛЛЕКЦИИ». Любая помощь в этом будет полезна.
Мобильная версия