Mark Up & StyleSheet/CSS & SCSS

⭐️ 이미지 태그일 때 .parent { position: relative; width: 100%; height: 0; padding-top: calc(861 / 1280 * 100%); } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } height를 0을 주었기 때문에 박스 모델 높이에 영향을 주는 건 padding-top 뿐이다. padding-top 계산식 => calc( 이미지 높이 / 이미지 폭 * 100%) 로 계산한다 이미 계산된 비율 aspect ratio | padding-top value --------------|---------------------- 16:9 | 56.25% 4:3 | 75% 3:2 ..