האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
in English

ראַטיאָס

ניצן דזשענערייטאַד פּסעוודאָ עלעמענטן צו מאַכן אַן עלעמענט האַלטן די אַספּעקט פאַרהעלטעניש פון דיין טשוזינג. שליימעסדיק פֿאַר ריספּאַנסיוולי האַנדלינג ווידעא אָדער סלידעשאָוו עמבעדז באזירט אויף די ברייט פון די פאָטער.

וועגן

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

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

פּראָ-טיפּ! איר טאָן ניט דאַרפֿן 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 בייַטעוודיק צו שאַפֿן מנהג אַספּעקט ריישיאָוז אויף די פליען מיט עטלעכע שנעל מאַטאַמאַטיקס פון דיין טייל.

פֿאַר בייַשפּיל, צו שאַפֿן אַ 2 קס 1 אַספּעקט פאַרהעלטעניש, שטעלן --bs-aspect-ratio: 50%די .ratio.

2x1
<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
  }
}
4x3, דעמאָלט 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%)
);