У меня есть обычный у него задан размер и при изменении окна браузера, этот 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=“responsive”
Из документации: При адаптировании изображение будет уменьшать размеры для меньших окон просмотра и увеличивать для больших окон просмотра.
-
добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 14 авг 2022 в 8:19