Positioning Image in next js

user_12402567 0
Viewed 11834

I want to make my Image on the most right of the page, I try to modify with position: absolute and right: 0. I also try to make parent position to relative, and image position to absolute, but why it doesn't work?

here's in my jsx file

        <div className={styles.images}>
          <Image
            src="/cloud.svg"
            alt="Picture of the author"
            layout="fill"
            className={styles.cloud}
          />
          <Image
            src="/kuil.svg"
            alt="Picture of the author"
            height={200}
            width={600}
            layout="intrinsic"
            className={styles.building}
          />
        </div>

Also in my css file.

.images {
    position: relative;
    margin: 90px auto 0 auto;
}

.building {
    position: absolute;
    top: 0;
    right: 0 !important;
    bottom: 0 !important;
}

enter image description here

next.js reactjs css
2 Answers

I had also encountered same problem. The Image tag when compiled wrap the img tag with a div tag of style position relative.

The solution is to simply wrap Image tag with div and add classname to the div.

check codesandbox

user_97409550

There's now a more convenient way to have full control of how your Images are positioned in Nextjs:

First: It's currently experimental, so to have it work you have to enable it in your next.config.js file.

example:

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    images: {
      layoutRaw: true,
    },
  },
};

module.exports = nextConfig;

Secondly: Use layout prop of the Image to 'raw'

example:

<Image
   src={ImageSource}
   alt={'description here'}
   layout={'raw'}
   ...
/>

So you can now style your Image as you wished.

Hope this helps!

user_136088420
Related