aspect-ratio 활용하기

aspect-ratio는 흔히 종대비라고 합니다.

가로와 세로의 비죠

가로가 1000px이고 세로가 1000px이면 

aspect-ratio 는 1:1 이 되고

css 표기로는 .box {

aspect-ratio : 1 /1

}

이렇게 되죠

예를들어 :)

반응형을 구현할때

pc에서는 이미지크기 600 * 600

태블릿에서는 이미지크기 500 * 500

모바일에서는 300 * 300 

이렇게 하겠다면 

미디어쿼리로 분기할 수도 있자나요

근데 그렇게 하면 반응형이 아니라 적응형이 되니까 

정확하게 저 수치대로 가는게 아니라 미디어쿼리의 기준에 맞춰서 바뀌니까

반응형답게 자연스럽게 바뀌게 해야하는데 

이미지를 

<img src>  태그처리 하는게 아니라

css 백그라운드 처리를 하려면 css에서 높이값을 지정해줘야 하니 애매하죠

그래서 aspect-ratio속성을 넣게 되면 쉽게 해결이 가능하다는 것이에요

** 이미지를 넣었는데 반응형으로 자연스럽게 줄게 하고 싶을때

** 이미지를 이미지 태그가 아니라 css 백그라운드 처리를 할때

소스 참조 링크

A Pen by saehwan (codepen.io)

만약에 이미지 크기가

가로 530px 에 세로 280px이다 라고 하면

종대비는 얼마일까요?

이럴때는 

280 / 530 하시면 

0.5283018867924528

값이 이렇게 떨어집니다 

적당히 반올림해서

aspect-ratio : 1 / 0.53 하시면 거의 동일하게 이미지크기가 떨어지고

이미지가 조금 잘리더라도 비율을 정확하게 맞추겠다면

background-size속성도 활용할 수 있는것이죠

반응형 이미지 처리할때 요긴하게 처리할 수있는 속성이며

css 셀렉터 레빌4에 위치하고 있습니다.

참고로 ios버전이 15전 밑으라면 지원은 안됩니다.

레퍼런스 참조

aspect-ratio - CSS: Cascading Style Sheets | MDN (mozilla.org)