비율

생성된 유사 요소를 사용하여 요소가 선택한 종횡비를 유지하도록 합니다. 부모의 너비에 따라 비디오 또는 슬라이드쇼 포함을 반응형으로 처리하는 데 적합합니다.

이 페이지에서

에 대한

<iframe>비율 도우미를 사용하여 s, <embed>s, <video>s 및 s 와 같은 외부 콘텐츠의 종횡비를 관리합니다 <object>. 이러한 도우미는 표준 HTML 자식 요소(예: a <div>또는 <img>)에서도 사용할 수 있습니다. 스타일은 부모 .ratio클래스에서 자식에게 직접 적용됩니다.

종횡비는 Sass 맵에서 선언되고 CSS 변수를 통해 각 클래스에 포함되며 맞춤 종횡비 도 허용 합니다.

프로 팁! Reboot 에서 재정의하므로 s frameborder="0"에 필요하지 않습니다 . <iframe>

예시

및 종횡비 클래스 <iframe>를 사용하여 상위 요소에서 와 같은 임베드를 래핑합니다 . .ratio직계 자식 요소는 유니버설 선택기 덕분에 자동으로 크기가 조정됩니다 .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

종횡비

종횡비는 수정자 클래스로 사용자 정의할 수 있습니다. 기본적으로 다음 비율 클래스가 제공됩니다.

1x1

4x3

16x9

21x9

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

맞춤 비율

각 .ratio-*클래스는 선택기에 CSS 사용자 정의 속성(또는 CSS 변수)을 포함합니다. 이 CSS 변수를 재정의하여 빠른 계산을 통해 즉석에서 사용자 정의 종횡비를 생성할 수 있습니다.

예를 들어, 2x1 종횡비를 생성하려면 에서 설정 --bs-aspect-ratio: 50%하십시오 .ratio.

2x1

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

이 CSS 변수를 사용하면 중단점에서 종횡비를 쉽게 수정할 수 있습니다. 다음은 시작하는 4x3이지만 중간 중단점에서 사용자 지정 2x1로 변경됩니다.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, 다음 2x1

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

사스 지도

에서 사용하려는 종횡비 _variables.scss를 변경할 수 있습니다. 다음은 기본 $ratio-aspect-ratios지도입니다. 맵을 원하는 대로 수정하고 Sass를 다시 컴파일하여 사용할 수 있습니다.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);