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

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

Сообщение Anonymous »


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


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

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

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

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

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

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