Катнашулар
Элемент сезнең сайлау аспектын саклап калу өчен ясалган псевдо элементларын кулланыгыз. Ата-ананың киңлегенә нигезләнеп видео яки слайдшоу урнаштыру өчен бик яхшы.
Турында
<iframe>
S, <embed>
s, <video>
s , s кебек тышкы эчтәлекнең аспектларын идарә итү өчен катнашу ярдәмчесен кулланыгыз <object>
. Бу ярдәмчеләр шулай ук теләсә нинди стандарт HTML балалар элементында кулланылырга мөмкин (мәсәлән, а <div>
яки <img>
). Стильләр ата-аналар .ratio
классыннан турыдан-туры балага кулланыла.
Аспект ставкалары Sass картасында игълан ителә һәм CSS үзгәрүчесе аша һәр класска кертелә, бу шулай ук махсус аспект дәрәҗәләрен рөхсәт итә .
Мисал
<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>
Махсус катнашу
Eachәр .ratio-*
класска селекторда CSS махсус милеге (яки CSS үзгәрүчесе) керә. Сез бу CSS үзгәрүчене кире кагарга мөмкин, чебендә махсус аспектлар булдыру өчен, сезнең тиз математика белән.
Мисал өчен, 2х1 аспект коэффициентын булдыру --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%)
);