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 백그라운드 처리를 할때
소스 참조 링크
만약에 이미지 크기가
가로 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)