יחסים
השתמש באלמנטים פסאודו שנוצרו כדי לגרום לאלמנט לשמור על יחס הגובה-רוחב לפי בחירתך. מושלם לטיפול בהטמעות של וידאו או מצגת שקופיות בהתבסס על רוחב ההורה.
על אודות
השתמש במסייע היחס כדי לנהל את יחסי הגובה-רוחב של תוכן חיצוני כמו <iframe>
s, <embed>
s, <video>
s ו- <object>
s. עוזרים אלה יכולים לשמש גם בכל רכיב צאצא HTML סטנדרטי (למשל, a <div>
או <img>
). סגנונות מיושמים .ratio
מכיתת ההורים ישירות על הילד.
יחסי גובה-רוחב מוצהרים במפת Sass ונכללים בכל מחלקה באמצעות משתנה 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 הזה כדי ליצור יחסי גובה-רוחב מותאמים אישית תוך כדי תנועה עם קצת מתמטיקה מהירה מצידך.
לדוגמה, כדי ליצור יחס רוחב-גובה של 2x1, הגדר --bs-aspect-ratio: 50%
ב- .ratio
.
<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
}
}
<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%)
);