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.
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;