კოეფიციენტები
გამოიყენეთ გენერირებული ფსევდო ელემენტები, რათა ელემენტმა შეინარჩუნოს თქვენი არჩეული ასპექტის თანაფარდობა. იდეალურია ვიდეოს ან სლაიდშოუს ჩაშენების საპასუხოდ დამუშავებისთვის, რომელიც დაფუძნებულია მშობლის სიგანეზე.
შესახებ
გამოიყენეთ თანაფარდობის დამხმარე გარე შინაარსის ასპექტის თანაფარდობის სამართავად, როგორიცაა <iframe>
s, <embed>
s, <video>
s და <object>
s. ეს დამხმარეები ასევე შეიძლება გამოყენებულ იქნას ნებისმიერ სტანდარტულ HTML ელემენტზე (მაგ., a <div>
ან <img>
). სტილები გამოიყენება მშობლის .ratio
კლასიდან პირდაპირ ბავშვზე.
ასპექტის კოეფიციენტები დეკლარირებულია Sass რუკაზე და შედის თითოეულ კლასში CSS ცვლადის საშუალებით, რომელიც ასევე საშუალებას აძლევს მორგებული ასპექტის შეფარდებას .
frameborder="0"
თქვენს
<iframe>
s-ზე, რადგან ჩვენ ამას
გადატვირთეთ თქვენთვის .
მაგალითი
შეფუთეთ ნებისმიერი ჩაშენება, როგორიცაა <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>
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%)
);