[CSS] aspect-ratio에 대해 알아보자! [6/6 study]

 

 

aspect-ratio에 대해 알아보자!

 

 

 

 

❗️aspect-ratio란?

- aspect ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다.

 

❗️사용법

❗️1. width/height 지정할 때!

- /를 이용하여 width/height 비율을 지정할 수 있습니다

 

예시

.box {
  width: 100px;
  aspect-ratio: 2 / 1;  /* 100px, 50px */
}

 

해석

width를 100px;

aspect-ratio: 2/1; 2대1 비율이므로 width는 100px이고 height는 50px이다!

 

❗️2. 한 개의 값만 지정할 때!

- 앞에 width/height를 지정할때와 비슷하다

- 하나의 값만 지정하면 height를 1로 간주한다

 

❗️3. auto, / 두개 동시에 사용할 때!

- 이 경우에는 요소가 고유한 종횡비를 가지는 경우 해당 종횡비를 따르지만, 만약 그렇지 않은 경우 지정한 비율을 따른다.

 

예시

body {
  display: flex;
  gap: 20px;
}
.box-1 {  
  width: 100px;
  aspect-ratio: auto 1/1;
  background: orange;
}
.box-2 { 
  width: 100px;
  aspect-ratio: auto 1/1;      
}
.box-3 { 
  width: 100px;
  aspect-ratio: 1/1;      
}

 

결과

 

❗️의문

aspect-ratio 속성은 너무 유용하다! 그런데 이미지에 aspect-ratio를 지정하면 이미지가 깨지던데 이 경우에는 어떻게 해야할까?

 

해결방법

- 이미지 깨짐을 방지하면서 종횡비를 지정하고 싶다면, object-fit 속성을 같이 써보자 

- img의 부모에 aspect-ratio를 지정하고, img에 object-fit: cover를 하면 이미지가 깨지지 않으면서 원하는 종횡비로 지정할 수 있다.

(부모, 자식에 지정해야 할 속성 주의!!)

 

예시코드

.parent {
  width: 300px;
  aspect-ratio: 3 / 1;
  border: 4px solid red;
}
.img {
  display: block; /*img default display - inline-block*/
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 

❗️주의!

aspect-ratio가 적용되지 않는 상황들

 

1. 너비 높이가 지정된 경우

- 요소의 너비와 높이가 지정된 경우, aspect-ratio는 반영되지 않는다.

 

2. min-xxx 가 지정된 경우

ex) min-height, min-width을 지정을 같이 하면 예상치 못한 결과가 나올 수 있다.

 

3. 내용이 요소를 넘는 경우

- 요소의 내용이 너무 길면, 요소는 확장되는데 이 경우에는 종횡비가 적용되지 않는다.

 

❗️참고자료

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

aspect-ratio - CSS: Cascading Style Sheets | MDN

 

 

🔥마무리

공부를 하면서 aspect-ratio를 적용해보는 경우가 생겨서 열심히 공부해서 포스팅 해보았다!

오늘도 화이팅!!