이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chromium, Safari Technology Preview 및 Firefox Nightly에서 지원되는 새로운 가로세로 비율 CSS 속성

반응형 레이아웃에서 간격을 유지하는 데 도움이 되는 새로운 CSS 속성입니다.

Una Kravets

참고: 요약: 가로세로 비율이라고 하는 너비-높이 비율을 일관되게 유지하는 것은 반응형 웹 디자인에서 그리고 누적 레이아웃 변경을 방지하는 데 매우 중요합니다. 이제 Chromium 88, Firefox 87 및 Safari Technology Preview 118에서 출시되는 새로운 aspect-ratio 속성을 사용하여 더 간단하게 이 작업을 수행할 수 있습니다.

가로세로 비율

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

가로세로 비율은 다음 크기에서 가장 일반적으로 두 개의 정수와 콜론으로 표현됩니다. 너비:높이 또는 x:y일 수 있습니다. 사진의 가장 일반적인 가로세로 비율은 4:3과 3:2인 반면, 동영상은 및 최신 소비자 카메라는 가로세로 비율이 16:9인 경향이 있습니다.

가로세로 비율이 동일한 이미지 2개 하나는 634x951픽셀이고 다른 하나는 200x300픽셀입니다. 두 동영상 모두 가로세로 비율이 2:3입니다.

반응형 디자인의 도래와 함께 가로 세로 비율을 유지하는 것이 특히 이미지 크기가 다르고 사용 가능한 애셋에 따라 요소 크기가 달라지기 때문에 있습니다.

다음은 가로세로 비율을 유지하는 것이 중요한 예입니다.

상위 요소 너비의 100% 를 차지하고 높이가 유지되어야 하는 반응형 iframe 만들기 특정 표시 영역 비율
이미지, 동영상, 임베딩에 대한 기본 자리표시자 컨테이너 만들기 항목이 로드되고 공간을 차지할 때 레이아웃 재배치 방지
대화형 데이터 시각화 또는 SVG 애니메이션을 위한 균일하고 반응형 공간 생성
카드, 캘린더 날짜 등의 다중 요소 구성요소를 위한 균일하고 반응형 공간 생성
크기가 다양한 여러 이미지를 위한 균일하고 반응형 공간 생성( object-fit)

개체 맞춤

가로세로 비율을 정의하면 반응형 컨텍스트에서 미디어 크기를 조정하는 데 도움이 됩니다. 이 예시의 또 다른 도구는 버킷은 object-fit 속성으로, 사용자는 객체 (예: 이미지)가 그 블록을 채워야 합니다.

객체 맞춤 데모 시각화 — 다양한 `object-fit` 값 표시. Codepen의 데모를 참고하세요.

initial 및 fill 값은 이미지를 재조정하여 공간을 채웁니다. 이 예에서는 픽셀이 재조정되므로 이미지가 찌그러지고 흐려집니다. 이는 이상적이지 않습니다. object-fit: cover 사용 이미지의 최소 크기를 조정하여 공간을 채우고 이를 기준으로 이미지를 적당히 자릅니다. 측정기준을 선택할 수 있습니다. '확대'됩니다. 가장 낮은 경계에 있습니다. object-fit: contain는 전체 이미지가 은 항상 표시됩니다. 따라서 가장 큰 경계의 크기를 갖는 cover의 반대입니다. (이 예에서는 너비) 기본 가로세로 비율을 유지하도록 이미지 크기를 조절합니다. 공간에 잘 어우러집니다. object-fit: none 케이스에서는 가운데가 잘린 이미지가 표시됩니다. (기본 개체 위치)를 원래 크기로 유지합니다.

object-fit: cover는 처리할 때 우수한 균일한 인터페이스를 보장하기 위해 대부분의 상황에서 작동하는 경향이 있습니다. 이런 식으로 정보를 잃을 수 있습니다 (이미지의 일부분이 (가장 긴 가장자리)

이러한 세부 사항이 중요한 경우 (예: 뷰티 제품을 평평하게 배치하는 경우) 중요한 콘텐츠를 자르는 것은 허용되지 않습니다. 따라서 이상적인 시나리오는 UI 공간에 맞게 자르지 않고 다양한 크기로 표시합니다.

기존 팁: `padding-top`로 가로세로 비율 유지

패딩 상단을 사용하여 캐러셀 내의 게시물 미리보기 이미지에 1:1 가로세로 비율을 설정합니다. — `padding-top`를 사용하여 캐러셀 내의 게시물 미리보기 이미지에 1:1 가로세로 비율을 설정합니다.

반응성을 높이기 위해 가로세로 비율을 사용할 수 있습니다. 이렇게 하면 미디어의 나머지 부분을 개별 축 (높이 또는 너비)의 기준으로 삼을 수 있습니다.

이미지의 크기를 기반으로 가로세로 비율을 유지하기 위해 현재 잘 알려진 교차 브라우저 솔루션입니다. "패딩-탑 해킹"으로 알려져 있습니다. 이 솔루션에는 상위 컨테이너와 하위 컨테이너를 배치하면 됩니다. 그런 다음 가로 세로 비율을 백분율로 계산하여 padding-top로 설정합니다. 예를 들면 다음과 같습니다.

가로세로 비율 1:1 = 1 / 1 = 1 = padding-top: 100%
4:3 가로세로 비율 = 3 / 4 = 0.75 = padding-top: 75%
3:2 가로세로 비율 = 2 / 3 = 0.66666 = padding-top: 66.67%
16:9 가로세로 비율 = 9 / 16 = 0.5625 = padding-top: 56.25%

이제 가로세로 비율 값을 식별했으므로 상위 컨테이너에 적용할 수 있습니다. 다음 예를 참고하세요.

<div class="container">
  <img class="media" src="..." alt="...">
</div>

그러면 다음과 같은 CSS를 작성할 수 있습니다.

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

`aspect-ratio`에서 가로세로 비율 유지

가로세로 비율을 사용하여 캐러셀 내의 게시물 미리보기 이미지에 1:1 가로세로 비율을 설정합니다. — `aspect-ratio`을 사용하여 캐러셀 내의 게시물 미리보기 이미지에 1:1 가로세로 비율을 설정합니다.

안타깝게도 이러한 padding-top 값을 계산하는 것은 그다지 직관적이지 않으며 추가적인 오버헤드와 포지셔닝이 필요합니다. 새로운 기본 aspect-ratio CSS 사용 속성, 관점을 유지하기 위한 언어 훨씬 더 명확해집니다.

동일한 마크업을 사용하여 padding-top: 56.25%를 aspect-ratio: 16 / 9로 바꿀 수 있습니다. width / height의 지정된 비율로 aspect-ratio

padding-top 사용

.container {
  width: 100%;
  padding-top: 56.25%;
}

가로세로 비율 사용

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top 대신 aspect-ratio를 사용하는 것이 훨씬 더 명확하며 패딩을 점검하지 않습니다. 속성을 사용하여 일반적인 범위 밖의 작업을 할 수 있습니다.

또한 이 새로운 속성은 가로세로 비율을 auto로 설정합니다. 여기서 '기본 가로세로 비율로 대체된 요소는 해당 가로세로 비율을 사용합니다. 비율 그렇지 않으면 상자에 선호되는 가로세로 비율이 없습니다." auto와 <ratio>가 모두 함께 지정되지 않을 경우 기본 가로세로 비율은 width를 height로 나눈 지정된 비율입니다. 교체된 요소 고유한 가로세로 비율. 이 경우 해당 가로세로 비율이 대신 사용됩니다.

예: 그리드의 일관성

이는 CSS 그리드 및 Flexbox와 같은 CSS 레이아웃 메커니즘에서도 잘 작동합니다. 목록 살펴보기 스폰서 아이콘 그리드와 같이 1:1 가로세로 비율을 유지하려는 하위 항목이 있는 경우:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

드림 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

다양한 가로세로 비율 크기의 상위 요소가 있는 그리드의 이미지 Codepen의 데모 보기

예: 레이아웃 변경 방지

aspect-ratio의 또 다른 장점은 자리표시자 공간을 만들어 레이아웃 변경 횟수를 통해 웹 바이탈을 개선할 수 있습니다. 이 첫 번째 부분에서는 예를 들어 Unsplash와 같은 API에서 애셋을 로드하면 미디어 로드가 완료되면 레이아웃이 변할 수 있습니다.

</ph> <ph type="x-smartling-placeholder">

</ph> 로드된 애셋에 가로세로 비율이 설정되지 않은 경우 발생하는 누적 레이아웃 변경 동영상입니다. 이 동영상은 에뮬레이션된 3G 네트워크로 녹화되었습니다.

반면에 aspect-ratio를 사용하면 이러한 레이아웃 변경을 방지하는 자리표시자를 만듭니다.

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

드림 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

가로세로 비율이 설정된 동영상은 로드된 애셋에 설정되어 있습니다. 이 동영상은 에뮬레이션된 3G 네트워크로 녹화되었습니다. Codepen의 데모 보기

보너스 팁: 가로세로 비율의 이미지 속성

이미지의 가로세로 비율을 설정하는 또 다른 방법은 이미지 속성을 사용하는 것입니다. 이미지의 크기를 미리 알고 있다면 권장사항: 이러한 크기를 width 및 height로 설정합니다.

위의 예에서는 크기가 800x600픽셀임을 알면 이미지 마크업이 <img src="image.jpg" alt="..." width="800" height="600">와 같이 표시됩니다. 전송된 이미지의 가로세로 비율이 동일한 경우 정확한 픽셀 값을 사용할 필요는 없지만 속성 값을 사용하여 비율을 설정하고 width: 100%의 스타일과 결합하여 이미지가 적절한 공간을 차지하도록 해야 합니다. 모두 합쳐지면 다음과 같은 형태가 됩니다.

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

결국 효과는 aspect-ratio CSS를 통해 이미지를 만들고 누적 레이아웃 이동을 피할 수 있습니다 (페이지의 데모 참조 Codepen)이 있습니다.

결론

새로운 aspect-ratio CSS 속성을 사용하면 여러 최신 브라우저에서 출시되며 미디어 및 레이아웃 컨테이너의 가로세로 비율은 조금 더 명확해집니다.

사진 제공: 에이미 샴블렌 및 라이오넬 Gustave(Unsplash).

Chromium, Safari Technology Preview 및 Firefox Nightly에서 지원되는 새로운 가로세로 비율 CSS 속성

가로세로 비율

개체 맞춤

기존 팁: padding-top로 가로세로 비율 유지

aspect-ratio에서 가로세로 비율 유지

예: 그리드의 일관성

예: 레이아웃 변경 방지

보너스 팁: 가로세로 비율의 이미지 속성

결론

기존 팁: `padding-top`로 가로세로 비율 유지

`aspect-ratio`에서 가로세로 비율 유지