이미지 사이즈 관련해서 접했던 키워드들을 적어둔다.

css

이미지 비율을 유지한체 가운데정렬시키기

/* img 엘리먼트를 담고있는 컨테이너*/
object-fit: contain;

/* div에 bacground img를 세팅 */
background: url({img_url});
background-size: cover;
background-position: center;

next/image 의 한계

한계점들이 많았다.

• Next/Image는 width height prop 을 필수로 입력해야하기 때문에, 가로나 세로 특정 비율에 맞춰서 이미지가 커지게 할 수 없었다. (물론 리서칭이 부족했을수도..)
  img 태그는 width 값만 넣으면 비율에 맞춰서 height값을 정해준다.
• 대용량 이미지를 next/image의 넣을경우 이미지를 처리하는과정에서 nextjs 렌더링서버가 뻗어버리곤했다. 대용량 이미지를 사용할 땐, 이미지를 줄이거나 img 태그를 활용하자.
  img 태그에 사용하면 별다른 이미지처리없이 바로 그리기 때문에 느리게 나타나긴하더라도 앱이 마비되거나 하진 않는다.