maxWidth is not applied in Next.js Image component

Question

<Image src="/assets/blog/image.webp" style={{ maxWidth: "700px" }} width={1400} height={1400} />

Error

Image with src /assets/blog/image.webp is assigned the following styles, which are overwritten by automatically-generated styles: maxWidth

I just build the app and test. maxWidth is working on the build production but not working on run on localhost. Why?

Answer 1

Add a wrapper div

// you could set the height here to and image will contain thi size
<div style={{ maxWidth: "700px" }} >
  <Image src={path} layout="fill" className={'image'} />
</div>

css for 'image'

.image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
  }