DEV Community

Shawon Saha
Shawon Saha

Posted on

Creating Perfect Rounded Images in Next.js Using Tailwind CSS

Achieving perfect rounded images, especially when the aspect ratio isn't 1:1, can be a challenge in web development. However, Tailwind CSS in combination with Next.js offers a simple solution using the aspect-square class.

Implementation:

In your Next.js component file, utilize the Image component provided by Next.js along with Tailwind CSS classes to create a perfect rounded image:

import Image from 'next/image';

const RoundedImage = () => {
  return (
    <>
      <Image
        src="/image.png"
        height={40}
        width={40}
        alt="Dummy Image"
        className="rounded-full aspect-square object-cover"
      />
    </>
  );
};

export default RoundedImage;

Enter fullscreen mode Exit fullscreen mode

Tailwind CSS Classes:

  • rounded-full: Displays the image with rounded corners.
  • aspect-square: Ensures the image retains its aspect ratio, displaying as a perfect circle regardless of the original aspect ratio.
  • object-cover: Allows the image to cover its container without stretching, maintaining its aspect ratio.

By combining these classes, you can effortlessly create a perfect rounded image in your Next.js application. This approach guarantees consistent and clean UI designs without worrying about the image's original aspect ratio.

Top comments (2)

Collapse
 
joeldotdias profile image
Joel Dias

Big appreciation

Collapse
 
redbeardjunior profile image
RedbeardJunior

Thank you just what I needed !