• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

product-card의 이미지 크기에 대한 질문

22.01.05 14:43 작성 조회수 133

1

강의 7:53 경의 내용에서 

.product-img {
  width: 100%;
  height: 180px;
}

강의와 다르게 height를 180px로 설정하면 product-img를 포함하는 <div></div>와 부모인product-card 사이에 여백이 생기는데 이유가 무엇인가요?

height를 210px로 설정하거나 css에서 <div></div>의 width를 100%로 바꾸면 꽉 채워지기는 하는데 어느 부분에서 차이가 나는지 모르겠어요..

답변 1

답변을 작성해보세요.

1

product-card의 너비와 높이가 정해져있는 상황에서 img의 height가 특정 기준보다 낮아지면 종횡비를 맞추기 위해 width가 작아지게 됩니다!

따라서 card의 너비비율에 맞는 height를 더 낮추게 되면 여백이 생기게 되는거죠!

slow님의 프로필

slow

질문자

2022.01.06

감사합니다!