next/image, how to set image width to 100%?

[ghost]

I tried to define my image like this:

<Image
  src={props.image.url}
  alt="Picture of the author"
  width={props.image.width}
  height={props.image.height}
  className="card__image"
  />

<style jsx>{`
  .card__image {
    width: 100%;
  }
`}</style>

But that won't work. The image is only displayed at full size. What should we do when we wan't a fluid width for the images, to use in a responsive grid etc?

[MathiasKandelborg]

I think your question overlaps with the one I recently made.

There's a link to where the styling is added in the next/image component.

[zeekrey]

In Version 10.0.1 they added the layout prop to the image component. Setting it to responsive sets the css max-/min-width to 100%. Maybe this works for your usecase.

[MathiasKandelborg]

@eivindml-solvr It released 3 days ago: https://github.com/vercel/next.js/releases/tag/v10.0.1

[urgn]

But layout is deprecated right now. What should I use to get it responsive?

[aranoe]

Yes, what is the alternative to layout?

[nannu-coder]

Yes, what is the alternative to layout?

<Image
src={imgSrc}
alt="image"
onError={handleImgError}
sizes="100vw"
fill
 />

[goodnewsj62]

this works but remember to add position relative on the parent, for me that was what solved my issue... i did it like so

<div style={{position:"relative"}}>
      <Image
      src={imgSrc}
      alt="image"
      onError={handleImgError}
      sizes="100vw"
      objectFit="cover"
      fill
       />
</div>

[NishargShah]

In 2023, every above solution is deprecated,

use below

<Image
  src="url"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }} // optional
/>

[swport]

wouldn't using width:100% is going to stretch a smaller image.?

[NishargShah]

width: auto is also an option

[Ingcamilo1020]

Thanks

[brianonchain]

Nice trick. For SVG, you can leave out "sizes" attribute. But, for PNG, you must have a sizes attribute or the image will become blurry.

[qingyao-tan]

great, thank you

[aranoe]

For me this works with tailwind:

   <div  className="relative h-20 w-full">
       <Image
         src={url}
         fill
       />
    </div>

Ofcourse you can use style or any other className. But the parent element has to have position: relative;.

NOTE: next/image with fill prop produces this style:

<img 
    style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
     ...
 />

[donguyenba]

For me this works with tailwind:

<div className="relative block h-[220px] w-full">
<Image src={image} alt="image" fill style={{ objectFit: 'cover' }} />
</div>

[ChetSocio]

Why the freaking hell is it necessary to use Image tag only . As a developer, we must have freedom to use img or figure tag based on requirements. It seems next js always limiting choice for developers for its egoistic approaches

[NafiurSiddiqui]

This is because all the dynamic sizing benefits you get out of the box. But I understand your point and I wish they will add more flexibility to the image component.

[surya-probo]

I can see that now the Image component has given the choice to pass only pure numbers for width and height. Even if it is optional, without passing height and width, it gives the error.

[NafiurSiddiqui]

Anyone wondering about it, you just set width to 100% on the className. I am using tailwind and just simply w-full which is basically css width:100% works like a charm.
Make sure you have a parent. e.g -

<div className="relative rounded-md w-full borderTest">
        <NextImage src={image} alt={imageAlt} className="rounded-t-md w-full" />
        <CardBlogTop />
</div>

[donguyenba]

If use want use fill props you can work here:

<div className="relative block h-[220px] w-full">
    <Image src={image} alt="image" fill style={{ objectFit: 'cover' }} />
</div>

[KakkoiDev]

100% TailwindCSS solution: object-cover

<div className="relative size-20">
    <Image src={image} alt="image" fill={true} className="object-cover" />
</div>

Documentation: https://tailwindcss.com/docs/object-fit

[tanomin]

All of the above solutions don't work. It's working for me:

 <div className="relative w-full h-[100vw] lg:h-screen">
          <Image src={image} alt={alt || "icon"} objectFit="contain" fill />
  </div>

[echives]

now nextJS official document gives an answer in 《Responsive Image》 chapter, here is the link
Responsive Images

  <Image
    src={me}
    alt="Picture of the author"
    sizes="100vw"
    style={{
      width: '100%',
      height: 'auto',
    }}
  />

and you can wrap it using a parent <div> tag to set custom size

[NishargShah]

I gave it this solution a year ago #18474 (comment) :)

[echives]

@NishargShah Thank you for saving us from struggling

[seancheung]

This works for imported image only, not an url