in English

კოეფიციენტები

გამოიყენეთ გენერირებული ფსევდო ელემენტები, რათა ელემენტმა შეინარჩუნოს თქვენი არჩეული ასპექტის თანაფარდობა. იდეალურია ვიდეოს ან სლაიდშოუს ჩაშენების საპასუხოდ დამუშავებისთვის, რომელიც დაფუძნებულია მშობლის სიგანეზე.

ამ გვერდზე

შესახებ

გამოიყენეთ თანაფარდობის დამხმარე გარე შინაარსის ასპექტის თანაფარდობის სამართავად, როგორიცაა <iframe>s, <embed>s, <video>s და <object>s. ეს დამხმარეები ასევე შეიძლება გამოყენებულ იქნას ნებისმიერ სტანდარტულ HTML ელემენტზე (მაგ., a <div>ან <img>). სტილები გამოიყენება მშობლის .ratioკლასიდან პირდაპირ ბავშვზე.

ასპექტის კოეფიციენტები დეკლარირებულია Sass რუკაზე და შედის თითოეულ კლასში CSS ცვლადის საშუალებით, რომელიც ასევე საშუალებას აძლევს მორგებული ასპექტის შეფარდებას .

პრო-წვერი! თქვენ არ გჭირდებათ frameborder="0"თქვენს <iframe>s-ზე, რადგან ჩვენ ამას გადატვირთეთ თქვენთვის .

მაგალითი

შეფუთეთ ნებისმიერი ჩაშენება, როგორიცაა <iframe>, მშობელ ელემენტში .ratioდა ასპექტის თანაფარდობის კლასით. ჩვენი უნივერსალური სელექტორის წყალობით, უშუალოდ ბავშვის ელემენტის ზომა ავტომატურად ხდება .ratio > *.

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

ასპექტის კოეფიციენტები

ასპექტის თანაფარდობა შეიძლება მორგებული იყოს მოდიფიკატორის კლასებით. ნაგულისხმევად მოცემულია შემდეგი თანაფარდობის კლასები:

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>

მორგებული კოეფიციენტები

თითოეული .ratio-*კლასი შეიცავს CSS მორგებულ თვისებას (ან CSS ცვლადს) ამომრჩეველში. თქვენ შეგიძლიათ გადალახოთ ეს CSS ცვლადი, რომ შექმნათ პერსონალური ასპექტის კოეფიციენტები თქვენი მხრიდან გარკვეული სწრაფი მათემატიკით.

მაგალითად , 2x1 ასპექტის თანაფარდობის შესაქმნელად დააყენეთ --bs-aspect-ratio: 50%..ratio

2x1

html

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

4x3, შემდეგ 2x1

html

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Sass რუკა

ფარგლებში _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%)
);