نسبت ها
از عناصر شبه تولید شده استفاده کنید تا یک عنصر نسبت ابعاد انتخابی شما را حفظ کند. ایده آل برای مدیریت پاسخگو ویدیو یا جاسازی های نمایش اسلاید بر اساس عرض والد.
در باره
از کمک کننده نسبت برای مدیریت نسبت ابعاد محتوای خارجی مانند <iframe>
s، <embed>
s، <video>
s و <object>
s استفاده کنید. این کمک کننده ها همچنین می توانند بر روی هر عنصر فرزند استاندارد HTML (به عنوان مثال، a <div>
یا <img>
) استفاده شوند. سبک ها از کلاس والد .ratio
به طور مستقیم به کودک اعمال می شوند.
نسبت ابعاد در یک نقشه Sass اعلام شده و از طریق متغیر CSS در هر کلاس گنجانده شده است، که همچنین امکان نسبت ابعاد سفارشی را فراهم می کند .
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>
نسبت ابعاد
نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد. به طور پیش فرض کلاس های نسبت زیر ارائه می شود:
<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%)
);