Харьцаа

Үүсгэсэн псевдо элементүүдийг ашиглан элементийг өөрийн сонгосон харьцаатай байлгах. Эцэг эхийн өргөнөөс хамааран видео эсвэл слайд шоуны суулгацыг хариу үйлдэл үзүүлэхэд тохиромжтой.

Энэ хуудсан дээр

тухай

<iframe>Харьцааны туслагчийг ашиглан s, <embed>s, <video>s, болон s зэрэг гадаад контентын харьцааг удирдана уу <object>. Эдгээр туслахуудыг ямар ч стандарт HTML хүүхэд элемент (жишээ нь, a <div>эсвэл <img>) дээр ашиглаж болно. Загварыг эцэг эхийн .ratioангиас хүүхдэд шууд хэрэглэдэг.

Хүрээний харьцааг Sass газрын зураг дээр зарлаж, CSS хувьсагчаар анги тус бүрт оруулсан бөгөөд энэ нь мөн хувийн харьцааг зөвшөөрдөг .

Pro-Tip! Дахин ачаалахад бид үүнийг хүчингүй болгосон тул та frameborder="0"өөрийн s- ийг ашиглах шаардлагагүй . <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>

Хэсгийн харьцаа

Аспектийн харьцааг өөрчлөх ангиудын тусламжтайгаар өөрчилж болно. Анхдагч байдлаар дараах харьцааны ангиллыг өгдөг.

1х1

4х3

16х9

21х9

<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 хувьсагчийг хүчингүй болгож, өөрт тохирсон тооны харьцааг хурдан гаргаж болно.

Жишээлбэл, 2х1 харьцаа үүсгэхийн --bs-aspect-ratio: 50%тулд .ratio.

2х1

<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
  }
}

4х3, дараа нь 2х1

<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%)
);