నిష్పత్తులు

ఒక మూలకం మీరు ఎంచుకున్న కారక నిష్పత్తిని నిర్వహించడానికి రూపొందించిన నకిలీ మూలకాలను ఉపయోగించండి. పేరెంట్ వెడల్పు ఆధారంగా వీడియో లేదా స్లైడ్‌షో పొందుపరిచేలా ప్రతిస్పందనాత్మకంగా నిర్వహించడానికి పర్ఫెక్ట్.

ఈ పేజీలో

గురించి

<iframe>s, <embed>s, <video>s మరియు s వంటి బాహ్య కంటెంట్ యొక్క కారక నిష్పత్తులను నిర్వహించడానికి రేషియో హెల్పర్‌ని ఉపయోగించండి <object>. ఈ సహాయకులు ఏదైనా ప్రామాణిక HTML చైల్డ్ ఎలిమెంట్‌లో కూడా ఉపయోగించవచ్చు (ఉదా, a <div>లేదా <img>). .ratioస్టైల్స్ పేరెంట్ క్లాస్ నుండి నేరుగా పిల్లలకి వర్తింపజేయబడతాయి .

కారక నిష్పత్తులు సాస్ మ్యాప్‌లో ప్రకటించబడతాయి మరియు CSS వేరియబుల్ ద్వారా ప్రతి తరగతిలో చేర్చబడతాయి, ఇది అనుకూల కారక నిష్పత్తులను కూడా అనుమతిస్తుంది .

అనుకూల చిట్కా! రీబూట్‌లో మేము మీ కోసం దాన్ని భర్తీ చేస్తున్నందున frameborder="0"మీ sలో మీకు అవసరం లేదు . <iframe>

ఉదాహరణ

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

సాస్ మ్యాప్

లోపల _variables.scss, మీరు ఉపయోగించాలనుకుంటున్న కారక నిష్పత్తులను మార్చవచ్చు. ఇదిగో మా డిఫాల్ట్ $ratio-aspect-ratiosమ్యాప్. మీకు నచ్చిన విధంగా మ్యాప్‌ను సవరించండి మరియు వాటిని ఉపయోగించేందుకు మీ సాస్‌ని మళ్లీ కంపైల్ చేయండి.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);