CSS aspect-ratio: 가로세로비

ALATTA

CSS aspect-ratio: 가로세로비

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

img {
  aspect-ratio: auto;
  /* aspect-ratio: 1 / 1; */
  /* aspect-ratio: 16 / 9; */
  /* aspect-ratio: 2; */
}

img {
  width: auto;
  height: 200px;
}

<img src="/assets/lion.jpg">

불러오는 중...

구문

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의 비율로 설정합니다. height는 1의 기본 값을 가지고 있으며 슬래시와 함께 생략할 수 있습니다. 선호 가로세로비를 사용한 크기 계산에는 box-sizing 속성으로 지정한 박스의 크기를 사용합니다.

명세

CSS Box Sizing Module Level 4

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
aspect-ratio
auto