నిష్పత్తులు
ఒక మూలకం మీరు ఎంచుకున్న కారక నిష్పత్తిని నిర్వహించడానికి రూపొందించిన నకిలీ మూలకాలను ఉపయోగించండి. పేరెంట్ వెడల్పు ఆధారంగా వీడియో లేదా స్లైడ్షో పొందుపరిచేలా ప్రతిస్పందనాత్మకంగా నిర్వహించడానికి పర్ఫెక్ట్.
గురించి
<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>
కారక నిష్పత్తులు
కారక నిష్పత్తులను మాడిఫైయర్ తరగతులతో అనుకూలీకరించవచ్చు. డిఫాల్ట్గా కింది నిష్పత్తి తరగతులు అందించబడ్డాయి:
<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>
సాస్ మ్యాప్
లోపల _variables.scss
, మీరు ఉపయోగించాలనుకుంటున్న కారక నిష్పత్తులను మార్చవచ్చు. ఇదిగో మా డిఫాల్ట్ $ratio-aspect-ratios
మ్యాప్. మీకు నచ్చిన విధంగా మ్యాప్ను సవరించండి మరియు వాటిని ఉపయోగించేందుకు మీ సాస్ని మళ్లీ కంపైల్ చేయండి.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);