अनुपात के बा

जनरेट कइल छद्म तत्व सभ के इस्तेमाल करीं जेह से कि कौनों तत्व के आपके पसंद के आस्पेक्ट रेशियो के बरकरार रखल जा सके। अभिभावक के चौड़ाई के आधार पर वीडियो या स्लाइडशो एम्बेड के प्रतिक्रियाशील रूप से संभाले खातिर एकदम सही।

एह पन्ना पर दिहल गइल बा

बारे में

<iframe>s, <embed>s, <video>s, आ s जइसन बाहरी सामग्री के आस्पेक्ट रेशियो के प्रबंधित करे खातिर रेशियो हेल्पर के इस्तेमाल करीं <object>. एह सहायक सभ के इस्तेमाल कौनों भी मानक एचटीएमएल चाइल्ड तत्व (जइसे कि, 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%)
);