<p>강의 7:53 경의 내용에서&nbsp;</p>
<div style="color: #eeffff; background-color: #263238; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #89ddff;">.</span><span style="color: #ffcb6b;">product-img</span> <span style="color: #89ddff;">{</span></div>
<div>&nbsp; <span style="color: #b2ccd6;">width</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">100%</span><span style="color: #89ddff;">;</span></div>
<div>&nbsp; <span style="color: #b2ccd6;">height</span><span style="color: #89ddff;">:</span> <span style="color: #f78c6c;">180px</span><span style="color: #89ddff;">;</span></div>
<div><span style="color: #89ddff;">}</span></div>
</div>
<p>강의와 다르게 height를 180px로 설정하면 product-img를 포함하는 &lt;div&gt;&lt;/div&gt;와 부모인product-card 사이에 여백이 생기는데 이유가 무엇인가요?</p>
<p>height를 210px로 설정하거나 css에서 &lt;div&gt;&lt;/div&gt;의 width를 100%로 바꾸면 꽉 채워지기는 하는데 어느 부분에서 차이가 나는지 모르겠어요..</p>

<p>product-card의 너비와 높이가 정해져있는 상황에서 img의 height가 특정 기준보다 낮아지면 종횡비를 맞추기 위해 width가 작아지게 됩니다!</p>
<p>따라서 card의 너비비율에 맞는 height를 더 낮추게 되면 여백이 생기게 되는거죠!</p>

인프런 커뮤니티 질문&답변

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