0

У меня есть обычный у него задан размер и при изменении окна браузера, этот img начинает уменьшаться относительно окна. Мне нужно заменить его на next/image, но у next/image нужно выставить размеры Если я их выставлю, то картинка не будет уменьшаться, при уменьшении окна браузера. Я думал что нужно сделать следующее для создаём контейнер обычный div я назвал его imgWrapper для него я планировал задать max-width and max-height например по 200, получается контейнер 200 на 200 и при уменьшении окна, он должен меняться = уменьшаться. А для Image я задал layout='fill' чтобы он вписался максимально в контейнер imgWrapper, также я указывал objectfit='cover' или contain и responsive я пробовал, что не так. Так же я задавал для imgWrapper width=100% height = auto, типа максимальный 200, но реальный 100%, но ничего не получается, кст если сделать для wrapper position: relative, то картинак появляется в контейнере, но не уменьшается, при уменьшении окна браузера, подскажите кто знает в чём я не прав, напишите желательно, как нужно сделать, создавать ли wrapper для Image какие свойства указывать Image типа layout, objectfit??

1
  • обидненько конечно, но ладно нет так нет, впрочем я уже нашел кое-какое решение использовать layout="intrinsic" - вроде работает 3 мар 2022 в 11:56

1 ответ 1

0

Для этого нужно использовать: layout=“responsive”

Из документации: При адаптировании изображение будет уменьшать размеры для меньших окон просмотра и увеличивать для больших окон просмотра.

Ссылка на англ. документацию

Пример использования

1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 14 авг 2022 в 8:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.