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