공간 크기에 맞도록 자동으로 이미지 사이즈 적용
img 태그를 사용할 때처럼 이미지 사이즈를 따로 작성하지 않고 그 공간의 크기에 따라 자동으로 이미지 사이즈가 적용되는 방법은 없을까요?
예를 들어 화면이 줄어들면 리스트 아이템들도 사이즈가 줄어들어 이미지 사이즈도 자동으로 줄어들게 되는 것처럼 그 부모에 맞춰(이때 부모도 사이즈 고정x) 사이즈가 자동으로 변하도록 하는 방법이 있는지 궁금합니다
답변 2
0
안녕하세요 이정환입니다.
반응형 이미지 설정에 대해 궁금하셨군요! img와 동일한 방법은 아니겠지만 불가능하지는 않아요 당연히 가능합니다 😃
아래 첨부해드린 공식 문서를 살펴보시면 next/Image 컴포넌트를 반응형으로 렌더링 하는 방법이 상세히 나와 있는데요 참고해보시면 좋을 것 같습니다!
https://nextjs.org/docs/app/api-reference/components/image#responsive-images
PS. 저는 보통 fill 옵션을 사용하곤 해요
0
안녕하세요, 인프런 AI 인턴입니다. 만두찐빵님께서 질문하신 내용은 CSS의 object-fit 속성을 활용하여 이미지를 부모 요소의 크기에 자연스럽게 맞추는 방법에 대한 것입니다. 이를 통해 화면 크기에 따라 이미지가 자동으로 조정될 수 있습니다. 아래 방법을 참고해 주세요.
- CSS Object-Fit 속성 사용:
object-fit: cover;를 사용하면 이미지가 부모 요소의 크기에 맞게 잘리며, 비율을 유지한 채로 꽉 차게 됩니다.
object-fit: contain;을 사용하면 이미지가 비율을 유지하면서 부모 요소 내에 완전히 들어가게 됩니다.
img {
width: 100%;
height: 100%;
object-fit: cover; /* 또는 object-fit: contain; */
}
위의 CSS 예시처럼 object-fit을 사용하면 부모 엘리먼트의 크기에 맞춰 자연스럽게 이미지 크기가 변하게 됩니다. 특히 반응형 웹 디자인에서 유용하게 사용할 수 있습니다.
관련된 기존 질문은 확인되지 않았습니다만, CSS object-fit 속성에 대한 W3Schools 문서를 참조하면 좀 더 상세한 정보를 얻을 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
버셀로 서버 배포 후 접속 시 500 에러 발생
0
66
2
컴포넌트와 레이아웃
0
53
2
@/styles/globals.css'
0
50
2
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
71
2
next.js 프로젝트
0
68
1
Next.js + Tanstack Query BFF 구조 질문
1
82
2
Next.js 사전렌더링 이해하기 부분
0
84
2
모달 관련 질문
0
87
3
렌더링 관련 질문
0
108
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
97
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
95
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
106
2
npx prisma db push 시 에러가 뜹니다.
0
131
3
vercel 배포를 실패하였습니다.
0
150
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
93
2
getServerSideProps 함수와 SSR의 관계
0
118
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
93
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
145
2
일반적인 nextjs project architecture에 대하여..
0
120
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
101
2
배포 시 오류 발생
0
111
2
백엔드 서버 오류납니다.
0
107
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
117
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
130
1