DEV Community

Shawon Saha
Shawon Saha

Posted on

8

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (2)

Collapse
 
joeldotdias profile image
Joel Dias

Big appreciation

Collapse
 
redbeardjunior profile image
RedbeardJunior

Thank you just what I needed !

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more