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

 

 

예전에 프로젝트 만들다가 알게 된 반응형 사각형 만드는 법.

예를들어, 이렇게 div 안에 들어있는 img의 크기를 화면 크기가 달라져도 정사각형으로 유지하고 싶을때 사용할 수 있다.

 

 

HTML

<div>
  <img src='https://dummyimage.com/640x4:3'>
</div>

 

CSS

div {
  width: 40%;
  position: relative;
}
div::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
div img {
  width: 100%;
  height: 100%;
  position: absolute;
}

반응형 정사각형을 만들기 위해서 div에 after 요소를 만들어 주고 padding-bottom을 100%로 설정해 줬다.

그리고 img의 width와 height은 100%로 설정하고, position을 absolute로 설정해 줘야 한다.

 

여러 요소에 공통적으로 적용할 때에는 다음과 같이 class를 만들어서 적용해 주면 되겠다.

.square {
  position: relative;
}
.square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square img {
  width: 100%;
  height: 100%;
  position: absolute;
}