1. 개요

반응형일 때 가로의 길이가 변하면 세로의 길이도 비율에 맞게 변해야 자연스럽게 보인다.
하지만 반응형은 보통 가로의 길이와 세로의 길이가 같은 비율로 변하지 않기 때문에 퍼센트를 사용하면 결국 비율이 깨지게 된다.

2. 사용법

html

<div class="parents">
    <div class="child">
       <img src="" alt="">
       <span>hello</span>
    </div>
</div>

먼저 비율을 유지할 부모 태그와 컨텐츠를 담을 자식태그를 만든다.

CSS

.parents {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

}

1. 부모태그에 높이는 0, 넓이를 지정하고 그 넓이만큼 padding-bottom을 준다.

• padding-bottom을 줄 때 주고 싶은 높이의 비율대로 퍼센트를 준다. (세로비/가로비 * 100)
• 부모의 width가 50%일 때 1대1 비율을 주고 싶으면 padding-bottom도 50%, 1 대 2 비율을 주고 싶으면 padding-bottom은 100%

2. 부모태그 relative, 자식태그 absolute로 지정하고 자식태그를 부모높이와 맟춘다.

• 부모태그는 비율을 유지하는 틀만 제공하면 padding으로 채워져있기 때문에 내용이 들어갈 수가 없다. 그래서 자식태그를 이용하여 내용을 채운다.