oranlar
Bir öğenin seçtiğiniz en boy oranını korumasını sağlamak için oluşturulan sözde öğeleri kullanın. Ebeveynin genişliğine göre video veya slayt gösterisi yerleştirmelerini duyarlı bir şekilde işlemek için mükemmeldir.
Hakkında
<iframe>
s, <embed>
s, <video>
s ve s gibi harici içeriğin en boy oranlarını yönetmek için oran yardımcısını kullanın <object>
. Bu yardımcılar ayrıca herhangi bir standart HTML alt öğesinde de kullanılabilir (örneğin, a <div>
veya <img>
). Stiller, ana .ratio
sınıftan doğrudan çocuğa uygulanır.
En boy oranları bir Sass haritasında bildirilir ve her sınıfa CSS değişkeni aracılığıyla dahil edilir, bu da özel en boy oranlarına da izin verir .
frameborder="0"
Reboot'ta sizin
<iframe>
için geçersiz kıldığımız için
s'nize ihtiyacınız yok
.
Örnek
<iframe>
, gibi herhangi bir yerleştirmeyi bir üst öğeye .ratio
ve bir en boy oranı sınıfına sarın . Hemen alt öğe, evrensel seçicimiz sayesinde otomatik olarak boyutlandırılır .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
En-boy oranları
En boy oranları, değiştirici sınıflarla özelleştirilebilir. Varsayılan olarak aşağıdaki oran sınıfları sağlanır:
<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>
Özel oranlar
Her .ratio-*
sınıf, seçicide bir CSS özel özelliği (veya CSS değişkeni) içerir. Kendi açınızdan biraz hızlı matematik ile anında özel en boy oranları oluşturmak için bu CSS değişkenini geçersiz kılabilirsiniz.
Örneğin, 2x1 en boy oranı oluşturmak --bs-aspect-ratio: 50%
için .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Bu CSS değişkeni, kesme noktaları arasında en boy oranını değiştirmeyi kolaylaştırır. Aşağıdaki, başlamak için 4x3'tür, ancak orta kesme noktasında özel bir 2x1 olarak değişir.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass haritası
içinde _variables.scss
, kullanmak istediğiniz en boy oranlarını değiştirebilirsiniz. İşte varsayılan $ratio-aspect-ratios
haritamız. Haritayı istediğiniz gibi değiştirin ve kullanmak için Sass'ınızı yeniden derleyin.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);