[Web/CSS] 반응형 정사각형 만들기

반응형 정사각형 만들기

반응형 정사각형이란 '사각형의 가로길이가 화면의 width에 대해 %'로 되어있고 '세로길이는 가로와 같아야' 합니다.

즉 가로길이는 변동하고 세로길이는 가로와 똑같아지면서 정사각형이 되는 것입니다.

자주 사용하지만 해당하는 문법이 정해진 게 없습니다. 따라서 우회적인 방법으로 구현해야 합니다.

 

html

• 컨텐츠를 감쌀 box div를 만들고 안에 컨텐츠를 넣는다.

<div class="box">
      <img class="content" src="https://images" alt="images"/>
</div>

 

CSS 구현 과정

• 감싸는 box의 사이즈를 설정합니다.
• after로 가상요소를 만듭니다.
• padding-bottom을 100%를 줍니다.
• 정사각형이 되는 이유는 padding-bottom이 width 값을 따르기 때문입니다.

박스 안에 요소가 들어가 있는 경우에는 다음과 같이 크기와 포지션을 조정합니다.

• .content 사이즈를 부모요소의 100%를 줍니다.
• .box를 기준으로 컨텐츠에 position을 통해 위치를 적용합니다.

 

.box {
  position: relative;
  width: 50%;
  background-color: skyblue;
}
.box::after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}