CSS aspect-ratio: 가로세로비

CSS aspect-ratio 속성은 요소 박스의 선호 가로세로비를 설정합니다. 선호 가로세로비는 자동 크기와 일부 레이아웃 내에서의 크기 계산에 사용됩니다.

불러오는 중...

aspect-ratio: auto;
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 2;

구문

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* 전역 값 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

auto

내재된 가로세로비를 가지는 대체 요소는 그 비율을 사용하고, 이외에는 선호 가로세로비를 설정하지 않습니다. 내재된 가로세로비를 사용한 크기 계산에는 항상 콘텐츠 박스의 크기를 사용합니다.

<ratio>

요소 박스의 선호 가로세로비를 width / height의 비율로 설정합니다. height1의 기본 값을 가지고 있으며 슬래시와 함께 생략할 수 있습니다. 선호 가로세로비를 사용한 크기 계산에는 box-sizing 속성으로 지정한 박스의 크기를 사용합니다.

명세

CSS Box Sizing Module Level 4

브라우저 호환성

IEEdgeChromeSafariFirefox
미지원88*88*1589*
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
158888*8915.0
MDN BCD에서 가져오는 데이터입니다.

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)