<div id="outer">
<div id="inner"></div>
</div>
위와 같이 있을 때, 아래와 같이 CSS를 적용한다.
#outer {
padding-top: calc(100% * 세로비율/가로비율);
position: relative;
}
#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
웹 개발 개인 창고
<div id="outer">
<div id="inner"></div>
</div>
위와 같이 있을 때, 아래와 같이 CSS를 적용한다.
#outer {
padding-top: calc(100% * 세로비율/가로비율);
position: relative;
}
#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}