ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
in English

నిష్పత్తులు

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

గురించి

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

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

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

ఉదాహరణ

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

కారక నిష్పత్తులు

కారక నిష్పత్తులను మాడిఫైయర్ తరగతులతో అనుకూలీకరించవచ్చు. డిఫాల్ట్‌గా కింది నిష్పత్తి తరగతులు అందించబడ్డాయి:

1x1
4x3
16x9
21x9
<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
<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
<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%)
);