Next.js Discord

Discord Forum

How to manipulate <Image> inside parent div?

Unanswered
qwrts posted this in #help-forum
Open in Discord
qwrtsOP
I tried to manipulate images in <Image> component inside <div> but it seems not to work.

it doesn't affected by the parent element (div) at all

<div className="w-40 h-20 overflow-hidden">
    <Image
        src='/pagebg.png'
        alt='Fakakvasad Page Backgorund'
        fill={true}
        sizes="100vw"
        style={{
           objectFit: 'cover',
        }}
        />
</div>


also. how can i make the image is auto width? cause i cant seem to put auto in width={}

2 Replies

@qwrts I tried to manipulate images in `<Image>` component inside `<div>` but it seems not to work. it doesn't affected by the parent element (div) at all html <div className="w-40 h-20 overflow-hidden"> <Image src='/pagebg.png' alt='Fakakvasad Page Backgorund' fill={true} sizes="100vw" style={{ objectFit: 'cover', }} /> </div> also. how can i make the image is auto width? cause i cant seem to put `auto` in `width={}`
B33fb0n3
when using "fill" the image will be positioned absolute. So add the "relative" class to your div and it will be inside the container. Like that you are also able to use the size of the container.

If you just want to give the image it's original size you can use this configuration:
<Image
  src={imageLink}
  alt={"some alt"}
  placeholder={"empty"}
  width="0"
  height="0"
  sizes="100vw"
  className="w-full h-auto rounded"
/>
B33fb0n3
@qwrts solved?