[Next.js] Image Component and Image Optimization 높이 자동 100% 적용하기

[Next.js] Image Component and Image Optimization 높이 자동 100% 적용하기

코드 "onLoad"를 통해서 실시간으로 높이 값 만큼 패딩값을 더해주면 자동으로 100% 효과를 얻을 수 있다. import Image from "next/image"; // Component const EventDetailRightComponent: React.FC<GenericProps> = ({}) => { const [paddingTop, setPaddingTop] = useState("0"); return ( <div className={styles.eventDetailContentBox} style={{ paddingTop }}> <Image src={items.image} layout="fill" objectFit="contain" aria-label="image" onLoad={({ target }) => { const { naturalWidth, naturalHeight } = target as HTMLImageElement; setPaddingTop(`calc(1...

#image #자동 #이미지최대 #이미지높이 #이미지 #높이최대 #높이자동 #높이 #react #nextjs #next #자동최대

원문링크 : [Next.js] Image Component and Image Optimization 높이 자동 100% 적용하기

 등록된 다른 글

[Flutter] 플러터 퍼미션(Permission) 권한 얻기 및 표시 (수정)

[VSCODE] 비주얼스튜디오코드(Visual Studio Code) 관리자 권한 부여

[Flutter] 플러터 인앱메세지(In-App Messageing)

[CentOS7] phpMyAdmin 행(컬럼) 보이는 갯수 늘리기

[Flutter] 플러터 몇 분전 몇 시간전 등 표시하기