[CSS] 요소를 비율로 조정하기

이미지와 같은 요소는 너비 값을 px 등의 단위로 고정하기 쉽지 않다. 

반응형 환경에서 고정으로 두면 화면의 크기에 따라 너무 커지거나 작아지기 때문이다. 

 

그래서 %로 설정하는 경우가 있는데, 원본 사이즈가 1 : 2인 요소를 1 : 1 비율로 화면에 나타내야 하면 

어떨까? 

 

생각만 해도 머리가 아픈 상황이다. 

기본적으로 이미지를 비율에 맞춰 자르려면 object-fit을 사용해서 본인은 처리하는데, 

object-fit을 사용하려면 고정적인 size를 가져야한다. 

 

하지만 앞서 말한 것처럼 고정적인 값을 가지면 반응형 환경에서 문제가 생긴다. 

이도저도할 수 없는 최악의 상황이다. 

 

여기서 도움을 주는 것이 aspect-ratio이다. 

 

aspect-ratio 

요소의 크기를 비율대로 조정할 수 있는 css 속성이다.

만약 width height을 1: 3 비율로 설정하고 싶다면 

 

aspect-ratio: 1 / 3;

직관적으로 1 / 3 으로 주면 width는 1, height은 3을 가지게 된다. 

 

만약 width 값이 calc(50% - 10px)인 부모의 자식 요소를 1 : 1 비율로 나오게 하려면 어떤 방식을 사용해야 할까? 

.부모 {
  width: calc(50% - 10px);
  padding: 0 5px;
}

.자식 {
  width: 100%;
  
  aspect-ratio: 1 / 1
}

다음과 같이 설정해주면 된다. 

 

calc(50% - 10px)인 부모가 나오는 경우가 생각보다 있을 것이다. 

물론 뒤에 10px은 상황에 따라 다를 것이다. 하지만 요소를 리스트로 나오게하고 좌우 padding을 동일하게 주는 경우는

아주 많다. 

 

이럴 때 요소의 비율, 해당 요소는 썸네일 등의 요소일 것이다. 

이것을 비율에 맞게 나타내는 것은 아주 귀찮았는데, aspect-ratio를 사용해서 간단하게 처리할 수 있다.