Не удалось добиться отзывчивости изображения в Next JS 13 + Tailwind CSS.CSS

Разбираемся в CSS
Anonymous
Не удалось добиться отзывчивости изображения в Next JS 13 + Tailwind CSS.

Сообщение Anonymous »


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


Мой код для этого:

Всё о нашем
НАЗВАНИЕ КОЛЛЕКЦИИ

Lorem Ipsum стал стандартным текстом-пустышкой в ​​отрасли с тех пор, как 1500-е годы, когда неизвестный печатник взял камбуз и перешифровал его. сделать типовой образец книги. Оно пережило не только пять столетий, но и скачок в электронную верстку, оставаясь по существу без изменений. Lorem Ipsum стал стандартным фиктивным текстом в отрасли. еще с 1500-х годов, когда неизвестный печатник взял галеру типа и переделал его, чтобы сделать типовую книгу. Оно сохранилось не всего пять столетий, но и скачок в электронную верстку, оставаясь практически неизменным

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

Вернуться в «CSS»