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;
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)
Big appreciation
Thank you just what I needed !