我正在關注創建博客網站的教程。我遇到了在 Next.js 中格式化 <Image /> 的問題我已經關注了視頻中的所有內容，但它已經有一年了，所以我假設有些事情已經改變了。
視頻：
我的樣子（資訊涂黑了）：
我的代碼：
`
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
`
它既不是圓整的，也不是中間對齊的。
我在 div 中嘗試過 align-middle 和 rounded-full，我嘗試過使 div 相對。
uj5u.com熱心網友回復：
該類align-middle處理垂直對齊。您在這里不需要它，因為它適用img于全域變數中的所有內容。
Tailwind 還將所有影像設定為display: block，因此如果您想將其居中，您只需添加mx-auto到影像本身即可。或者，您可以justify-content: center通過添加類來為影像的父 div 顯示 flex 和 use：flex justify-center。
要解決影像縱橫比問題，您可以為影像提供相同的固定高度和寬度，然后使用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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/530697.html
上一篇：useQueries中的異步引數（未定義）–ReactQuery
下一篇：無法添加邊距權以回應mui表