How to use object-position with next/image

Next.js offers many benefits compared to create-react-app, which is why the framework has been growing in popularity for the past few years.

One of these benefits is next/image. The magic of next/image is that it automatically optimizes images for smaller viewports. However, if you're like me, you might start to get frustrated with next/image when you start trying to style it with CSS. One challenge I faced was trying to center the image using the object-position CSS property. In the following example, I'll be using typescript, but if you prefer to use javascript, just change index.tsx to index.js/index.jsx and you'll be good to go.

global.css

.next-image{
   object-position: center
} 

The code above will not work with next/image. Instead, we have to pass props to Next's Image component. These props will then be passed to different CSS properties.

---

Image Size

Next's Image component offers us width and a height props. However, we won't be using them because we want our width to change according to the screen size. To do that we are going to create a container div and make sure anything outside that div is hidden. Don't forget to set the height and width of the container. Feel free to use media queries if you like.

index.tsx

import Image from 'next/image';
import someImage from "./public/someImage.png"

const Home = () => {
  return (
    <div className="next-image-container">
      <Image src={officeImg} />
    </div>
  );
};
export default Home;

global.css

.next-image-container {
  height: 400px;
  width: 100vw;
  overflow: hidden;
}

---

Setting the Object-Position Property

Next/image comes with objectFit and objectPosition props. These props get passed to the CSS object-fit and object-position properties. In order to use objectFit and objectPosition, we also need to set out layout prop to fill (this will make the image grow to fit our container). Finally, we'll add position: relative to our next-image-container class. Don't forget this step or your image might just take up your whole page.

Take a look at the final code below.

index.tsx

import Image from 'next/image';
import someImage from "./public/someImage.png"

const Home = () => {
  return (
    <div className="next-image-container">
      <Image
        src={officeImg}
        layout="fill"
        objectFit="cover"
        objectPosition="center bottom"
      />
    </div>
  );
};
export default Home;

global.css

.next-image-container {
  height: 400px;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

---

Troubleshooting

Problem: Image is taking up the whole screen.

Solution: Make sure the parent div is set to position: relative. In situations where the parent div cannot be relative, create a new wrapper div around your image with a single CSS property: position: relative.

---

If you'd like to learn more about next/image, you can check out the documentation here.

Happy coding!