[Next.js] Next Image responsive size

https://mycodings.fly.dev/blog/2022-09-08-all-about-nextjs-image-component#%EC%9D%B4%EA%B2%83%EB%A7%8C%EC%9D%80-%EA%BC%AD

Next.js Image 컴포넌트 완벽 가이드

 

 

width/height은 직접적으로 정적값을 부여할 수 있음. 이 때, layout 속성의 값에 따라 특성이 변함.

layout = "intrinsic" | "fixed" | "responsive"| "fill" 

intrinsic(디폴트 값), fixed는 width/height 속성 값이 그대로 픽셀에 적용

( intinsic은 w/h 에 따라 얼마나 많은 자리를 차지하는지 계산 , fixed는 w/h의 정확한 값이 나옴 ) 

fill: 이미지를 부모 요소의 w/h에 맞추기 위해 자동으로 조절. (상위 부모 요소에 position:relative 옵션 적용 필수)

- 이미지 사이즈 모를 때 사용하면 좋은 옵션

reponsive: 부모 요소의 width에 맞게 이미지를 확대. ( 부모 컨테이너 display block을 추가해줘야 함)