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.

Bu sayfada

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 .ratiosı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 .

Profesyonel İpucu! 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 .ratiove bir en boy oranı sınıfına sarın . Hemen alt öğe, evrensel seçicimiz sayesinde otomatik olarak boyutlandırılır .ratio > *.

html

<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:

1x1

4x3

16x9

21x9

html

<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.

2x1

html

<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
  }
}

4x3, sonra 2x1

html

<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-ratiosharitamı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%)
);