섹션 7. Grid - 실습 예제 관련 질문 - 인프런

13가지 예제로 배우는 CSS Flex & Grid 핵심 기능

섹션 7. Grid - 실습 예제 관련 질문

해결된 질문

작성

173

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

섹션 7. Grid - 실습 예제에 쇼핑몰 상품 리스트를 따라하고 있는데 세로가 긴 사진 말고 가로가 긴 사진을 넣으면 레이아웃이 높이가 제각각으로 되는데

가로가 긴사진 세로과 긴사진 섞어서 쓸려면 어떻게 해야 하는지 문의 드립니다.

답변 2

질문자

답변 감사드립니다. 말씀하신대로 했더니 잘 됩니다.

지식공유자

심재화님 안녕하세요.

우선, 섞어서 쓴다는 부분이 아마 다양한 사이즈의 이미지를 뿌리고자 할때, 한 아이템 (셀)의 크기가 일정했으면 좋겠다는 의미로 파악됩니다.

그렇다면 아마 예제를 따라하시니까 이렇게 되어서 질문을 주신 것 같습니다. 음. 사실 상황에 따라 어떻게 처리를 할지 경우의 수는 많습니다만...

img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

현재 HTML 구조를 변경하지 않는다는 가정하에, 이렇게 이미지에 직접 사이즈를 지정하시고, object-fit 속성을 추가해보세요.

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

특정 비율 (?)로 고정하고 싶으시다면, aspect-ratio 속성을 써보세요.