Next JS image centering while screen size increases

Question

I've been having a tough time working with NextJS's Image component. I want to setup a banner image. This image must only cover a certain amount of space on the screen at any time, regardless of screen size. I've gotten this to mostly work with the combination of max-height: 30vh and overflow: hidden. However, I can't seem to get the image to center while the screen size changes. It should vary from seeing the entire image to focusing on the bed. Instead, its focusing on the pic's ceiling.

Live sample: https://codesandbox.io/s/nextjs-image-layout-lc7vb?file=/src/pages/index.tsx

const Index = (props: IBlogGalleryProps) => (
  <Main
    ...
  >
    <div className="w-full overflow-hidden" style={{ maxHeight: '30vh' }}>
      <Image width="300" height="200" layout="responsive" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
    </div>
    ...
  </Main>
);

Accelerometer

Not my downvote, but I imagine it's because you posted an entire project without much guidance as to where to look. I'm unfamiliar with NextJS - perhaps if you know it it's obvious where your problem is but diving in there are dozens of files. – Groveman

@SandyGifford I updated the link to redirect to the page in question and pasted the code in question. Its most likely CSS I need to adjust but I can't seem to figure out how. – Accelerometer

that's checks all of my boxes – Groveman

Answer 1

If you want to align the image according to your needs, you should use layout="fill" with eg. objectFit="cover".

next/image API Reference

When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit.

For this to work, the container needs a height and position: relative.

You can also set objectPosition if you don't want the CSS's default object-position: 50% 50%.

This should do the trick:

const Index = (props: IBlogGalleryProps) => (
  <Main
    ...
  >
    <div className="w-full overflow-hidden relative" style={{ height: '30vh' }}>
        <Image layout="fill" objectFit="cover" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
    </div>
    ...
  </Main>
);

Here is an working example: https://codesandbox.io/s/nextjs-image-layout-forked-82op5?file=/src/pages/index.tsx

Redundancy

This is exactly what I was looking for. I had found this feature recently but typescript kept complaining. Didn't realize I had to remove the resolution. Thanks! – Accelerometer

Thanks for your explanation!! This really helped me! – Cranmer

objectPosition was just what I was looking for. I wanted it like this: objectPosition="50% 25%". Thanks!! – Unmeriting

Answer 2

@El Devoper's answer is the correct approach, but for version 13+ the objectFit and layout props have been removed. Instead you need to use the style prop.

Version 13+

<Image fill style={{ objectFit: "cover" }} />

Wideangle

Answer 3

<div
     style="
            height: 30vh;
            width: 100%;
            max-width: 800px;
            position: relative;
            background-image: url('/imagelink/image.jpg');
            background-position: center center;
            background-size: cover;
            ">

</div>

you could use a div and set to it a background. What you call fixing on the bed are done with the background-position tag.

But you can also use object-fit and object-position for the <img/> tag. like this:

object-fit: cover;
object-position: center;

this will make you image always 100% width and height of the <img/> box size and also center it.

Arianna

If I didn't need to use the Image component, I would have use a similar solution but I do need to use it. – Accelerometer