अनुपात

के बारे में

<iframe>बाहरी सामग्री जैसे s, <embed>s, <video>s, और s के पक्षानुपात को प्रबंधित करने के लिए अनुपात सहायक का उपयोग करें <object>। इन हेल्पर्स का उपयोग किसी भी मानक HTML चाइल्ड एलिमेंट (जैसे, a <div>या <img>) पर भी किया जा सकता है। शैलियाँ मूल .ratioवर्ग से सीधे बच्चे पर लागू होती हैं।

पक्षानुपात को एक Sass मानचित्र में घोषित किया जाता है और CSS चर के माध्यम से प्रत्येक वर्ग में शामिल किया जाता है, जो कस्टम पक्षानुपात की भी अनुमति देता है ।

उदाहरण

किसी भी एम्बेड को लपेटें, जैसे <iframe>a , मूल तत्व में .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 चर) शामिल होता है। आप अपनी ओर से कुछ त्वरित गणित के साथ फ्लाई पर कस्टम पहलू अनुपात बनाने के लिए इस सीएसएस चर को ओवरराइड कर सकते हैं।

उदाहरण के लिए, 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नक्शा है। मानचित्र को अपनी पसंद के अनुसार संशोधित करें और उन्हें उपयोग में लाने के लिए अपने Sass को पुन: संकलित करें।

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