ראַטיאָס

וועגן

ניצן די פאַרהעלטעניש העלפּער צו פירן די אַספּעקט ריישיאָוז פון פונדרויסנדיק אינהאַלט ווי <iframe>s, <embed>s, <video>s און <object>s. די העלפּערס קענען אויך זיין געוויינט אויף קיין נאָרמאַל HTML קינד עלעמענט (למשל, אַ <div>אָדער <img>). סטיילז זענען געווענדט פון דער פאָטער .ratioקלאַס גלייַך צו דעם קינד.

אַספּעקט ריישיאָוז זענען דערקלערט אין אַ סאַסס מאַפּע און ינקלודעד אין יעדער קלאַס דורך CSS בייַטעוודיק, וואָס אויך אַלאַוז מנהג אַספּעקט ריישיאָוז .

בייַשפּיל

ייַנוויקלען קיין ימבעד, ווי אַ <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>

אַספּעקט ריישיאָוז

אַספּעקט ריישיאָוז קענען זיין קאַסטאַמייזד מיט מאָדיפיער קלאסן. דורך פעליקייַט די פאלגענדע פאַרהעלטעניש קלאסן זענען צוגעשטעלט:

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

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

דעם CSS בייַטעוודיק מאכט עס גרינג צו מאָדיפיצירן די אַספּעקט פאַרהעלטעניש צווישן ברייקפּאָינץ. די פאלגענדע איז 4 קס 3 צו אָנהייבן, אָבער ענדערונגען צו אַ מנהג 2 קס 1 אין די מיטל ברייקפּוינט.

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

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

סאַס מאַפּע

אין _variables.scss, איר קענען טוישן די אַספּעקט ריישיאָוז איר ווילן צו נוצן. דאָ ס אונדזער פעליקייַט $ratio-aspect-ratiosמאַפּע. מאָדיפיצירן די מאַפּע ווי איר ווילט און רעקאָמפּייל דיין סאַס צו נוצן זיי.

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