Issues formatting <Image /> in Next.js with tailwind-CodePudding

I am following a tutorial creating a blog site. I am running into an issue with an <Image /> formatting it in Next.js I have followed everything in the video, but it is a year old so I am assuming some things have changed.

The video:

How mine looks (info blacked out):

My code:

import React from 'react'
import Image from 'next/image'

const Author = ({ author }) => {
  return (
    <div className='text-center mt-20 mb-8 p-12 relative rounded-lg bg-black bg-opacity-20'>
        <div className='absolute left-0 right-0 -top-14'>
          <Image
          alt={author.name}
          unoptimized
          height='100'
          width='100'
          layout='fill'
          className='align-middle rounded-full'
            src={author.photo.url}
            />
    </div>
    <h3 className='text-white my-4 text-xl font-bold'>{author.name}</h3>
    <p className='text-white text-lg'>{author.bio}</p>
    </div>
  )
}

export default Author

It is neither rounded full, nor is it aligning middle.

I have tried align-middle and rounded-full in the div, I have tried making the div relative.

CodePudding user response：

The align-middle class deals with vertical alignment. You don't need that here, as it's applied to all img in the globals.

Tailwind also sets all images to display: block, so if you want to center it, you can just add mx-auto to the image itself. Alternatively, you can give the parent div of the image a display of flex and use justify-content: center by adding the classes: flex justify-center.

To fix the image aspect ratio issue, you can give your image a fixed height and width that are the same and then use object-fit: cover.


const Author = ({author}) => {
  return (
    <div className="text-center mt-20 mb-8 p-12 relative rounded-lg bg-black bg-opacity-20">
      <div className="absolute left-0 right-0 -top-14">
        <Image
          alt={author.name}
          unoptimized
          height="100"
          width="100"
          className="rounded-full mx-auto h-24 w-24 object-cover"
          src={author.photo.url}
        />
      </div>
      <h3 className="text-white my-4 text-xl font-bold">{author.name}</h3>
      <p className="text-white text-lg">{author.bio}</p>
    </div>
  );
};

export default Author;