css 이미지 비율(종횡비) 고정하는 방법 aspect-ratio 사용

aspect ratios는 화면비(종횡비)라는 뜻으로 디스틀레이의 가로 세로 길이의 비율을 뜻합니다.

css최신 기능으로 추가된 aspect-ratio속성으로 이미지 비율을 편리하게 설정할 수 있습니다.

지원 가능한 브라우저는 다음과 같습니다.

aspect-ratio는 IE를 지원하지 않습니다. IE를 고려하지 않아도 된다면 aspect ratios를 사용하면 좋을 것 같습니다.

aspect-ratios 지원 브라우저

 

속성값은 다음과 같이 사용할수 있습니다.

컨테이너의 기본 가로 세율 비율은 지정된 width와 height 비율입니다. height와 앞의 슬래시( / ) 문자를 생략하면 높이는 1로 설정됩니다.

기본 종횡비의 크기 계산은 box-sizing으로 지정된 상자의 크기로 계산됩니다.

aspect-ratio: 1 / 1;
aspect-ratio: 1;    /* 슬래시 생략으로 높이값 1로 설정됨 */

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;    /* auto 지정 */
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;    /* 비율지정하지 않음 */

 

aspect ratios(종횡비) auto지정

종횡비를 auto로 하였을 경우 부모태그의 넓이값에 따른 이미지 높이 그대로 지정됩니다. 그냥 auto로 설정 시 이미지 크기 그대로 나온다 생각하시면 될 거 같습니다. 

aspect-ratio가 지정된 부모 컨테이너의 넓이값에 따라 종횡비의 크기가 계산 되므로 꼭 부모태그에 넓이값 정보가 있어야 합니다. 넓이 정보값이 없으면 비율 계산을 못하는 것 같습니다.

See the Pen Untitled by woosohee (@venusy) on CodePen.

 

 

 

 

aspect ratios(종횡비) 가로값 강제지정

이미지 넓이 고정하고 종횡비만 조정하여 사용수 있습니다. aspect-ratios 단독으로 사용하는 것 보다는 object-fit을 같이 사용하면 이미지의 일부분을 원하는 비율대로 보여줄 수 있습니다.

See the Pen Untitled by woosohee (@venusy) on CodePen.

 

 

 

aspect ratios(종횡비) 반응형 지정

모바일 디바이스를 많이 사용하다보니 이미지가 정해진 사이즈보다는 크기에 맞게 넓이값이 조정되면서 비율이 맞춰지도록 사용하는 것이 일반적입니다. 부모태그에 가로값 100%에 max-width값을 적용하여 종횡비 반응형을 사용할 수 있습니다.

아래는  반응형으로 이미지의 가로값이 480px까지 비율을 유지하는 코드입니다.

See the Pen spect-ratio sample3 by woosohee (@venusy) on CodePen.

 

 

 

object-fit에 대한 자세한 내용은 아래글을 참고해 주세요.

css를 사용하여 이미지 원하는 부분보여주기 : object-fit