色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

Next.js Image-如何保持縱橫比并在需要時添加信箱

傅智翔1年前6瀏覽0評論

我的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類。

希望這有所幫助