我的Next.js應用程序中有一個區(qū)域是照片庫的選定照片,所以當人們翻閱選定的圖像或加載照片時,它的大小必須保持固定。我有一個響應式布局,但如果真的按下,我會說這個像素面積是566像素* 425像素。
我對如何實際做到這一點感到困惑。這是我能得到的最接近的圖像,但問題是當長寬比超過566x425時,我會得到溢出的圖像,對于長寬比低于566x425的圖像,它會在Y方向拉伸它。我真正想要的是有一個固定的盒子,然后如果長寬比與最大尺寸不同,你會看到信箱或者在邊上或者在頂部和底部。
<div
style={{
position: 'relative',
width: '566px',
height: '425px',
}}
>
<Image
src={currCommit.image.url}
alt="Current Image"
layout={'fill'}
objectFit="cover"
/>
</div>
哦我想到了。關鍵是將父div設置為固定大小和相對大小,然后將圖像設置為fill布局和objectFit包含。這種方法的唯一缺點是我需要設置媒體查詢,這樣它就可以適應更小的尺寸。
<div className="relative item-detail">
<Image src={currCommit.image.url} alt="Current Image" layout={'fill'} objectFit={'contain'} />
</div>
然后在css中我設置:
.item-detail {
width: 300px;
height: 225px;
}
我認為有更好的解決方案,NextImage在LoadingComplete上有回調(diào)屬性:
一個回調(diào)函數(shù),一旦圖像被完全加載并且占位符被移除,就調(diào)用該函數(shù)。
onLoadingComplete函數(shù)接受一個參數(shù),一個具有以下屬性的對象:naturalWidth、naturalHeight
您可以使用自然屬性來設置圖像比例,而不會失去NextImage的布局功能,如下所示:
const NaturalImage = (props: ImageProps) => {
const [ratio, setRatio] = useState(16/9) // default to 16:9
return (
<NextImage
{...props}
// set the dimension (affected by layout)
width={200}
height={200 / ratio}
layout="fixed" // you can use "responsive", "fill" or the default "intrinsic"
onLoadingComplete={({ naturalWidth, naturalHeight }) =>
setRatio(naturalWidth / naturalHeight)
}
/>
)
}
唯一的缺點是縱橫比僅在圖像加載后應用,因此占位符使用默認的比率(在本例中為16:9 -通用),這可能會導致CLS
從下一個13版本開始,layout和objectFit已經(jīng)被棄用,取而代之的是固有的樣式屬性。這實際上使我們的工作更容易,因為你現(xiàn)在可以用常規(guī)的CSS樣式的圖像,就像這樣:
import Image from "next/image";
<div style={{ position: 'relative', width: '566px', height: '425px'}}>
<Image fill
src={currCommit.image.url}
alt="Current Image"
style={{objectFit: 'cover'}}
/>
</div>
我能找到的最好的解決方案是不需要指定精確的寬度或高度。
<Image
layout="responsive"
width="100%"
height="62.5%" // 16:10 aspect ratio
objectFit="cover"
src={src}
/>
根據(jù)巴渝的asnwer, 您可以創(chuàng)建一個名為RatioNextImage的自定義組件,并像下面這樣使用它。
<RatioNextImage src={put_your_URL_here} alt={put_the_alt_here}/>
在RatioNextImage.tsx中
import NextImage from "next/image";
import { useState } from "react";
interface Props {
src: string;
alt: string;
}
const RatioNextImage = ({ src, alt }: Props) => {
const [ratio, setRatio] = useState(16 / 9); // this value can be anything by default, could be 1 if you want a square
return (
<NextImage
src={src}
width={200}
height={200 / ratio}
layout="fixed"
onLoadingComplete={({ naturalWidth, naturalHeight }) => {
setRatio(naturalWidth / naturalHeight);
}}
/>
);
};
export default RatioNextImage;
由于“objectFit”在最新版本的Next中已被棄用,下面是一個很好的代碼片段:
<div className="relative w-10 h-10">
<Image src={User} alt="User Profile Image" fill />
</div>
w-10,h-10是定義寬度和高度值的CSS類。
希望這有所幫助