https://www.inflearn.com/questions/64102
&nbsp;
이전 질문에서 설명해주신걸 보았으나 잘 이해가 가지 않아
다른 질문 드립니다!
&nbsp;
height: 0;
padding-bottom: 60%;
&nbsp;
을 주면 보이지 않던 이미지가 보이게 되는데 그 이유가 아직도 잘 이해가 안갑니다.
올려주신 이전 답변에서 padding bottom만 남고 height은 0이 되는데 어떻게 보이지 않던 이미지가 보이게 되는건지... 다시 설명을 부탁드리겠습니다 ㅠㅠ 감사합니다!
&nbsp;

padding값 자체가 엘리먼트의 width를 기준으로 한답니다. 즉 폭이 100px이라면, padding-bottom: 60%는 100px의 60%인 60px이 됩니다. 브라우저 너비가 바뀌어서 폭이 500px이 되었다면, padding-bottom: 60%은 500px의 60%인 300px이 되겠지요~ padding이 이런 원리로 동작하기 때문에, 가변폭에서 비율을 맞춰 높이를 조정하는 용도로 자주 쓰인답니다.
인터넷 익스플로러를 고려하지 않아도 되는 상황이라면, aspect-ratio를 사용하시는 것도 좋습니다. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio</a>

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

https://www.inflearn.com/questions/64102