-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
https://www.inflearn.com/questions/64102
21.11.27 18:07 작성 조회수 102
0
https://www.inflearn.com/questions/64102
이전 질문에서 설명해주신걸 보았으나 잘 이해가 가지 않아
다른 질문 드립니다!
height: 0;
padding-bottom: 60%;
을 주면 보이지 않던 이미지가 보이게 되는데 그 이유가 아직도 잘 이해가 안갑니다.
올려주신 이전 답변에서 padding bottom만 남고 height은 0이 되는데 어떻게 보이지 않던 이미지가 보이게 되는건지... 다시 설명을 부탁드리겠습니다 ㅠㅠ 감사합니다!
답변을 작성해보세요.
0
1분코딩
지식공유자2022.02.19
padding값 자체가 엘리먼트의 width를 기준으로 한답니다.
즉 폭이 100px이라면, padding-bottom: 60%는 100px의 60%인 60px이 됩니다.
브라우저 너비가 바뀌어서 폭이 500px이 되었다면, padding-bottom: 60%은 500px의 60%인 300px이 되겠지요~
padding이 이런 원리로 동작하기 때문에, 가변폭에서 비율을 맞춰 높이를 조정하는 용도로 자주 쓰인답니다.
인터넷 익스플로러를 고려하지 않아도 되는 상황이라면, aspect-ratio를 사용하시는 것도 좋습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
답변 1