in English

अनुपात

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

इस पृष्ठ पर

के बारे में

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

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

प्रो टिप! frameborder="0"आपको अपने s की आवश्यकता नहीं है क्योंकि हम इसे आपके लिए Reboot<iframe> में ओवरराइड करते हैं ।

उदाहरण

किसी भी एम्बेड को लपेटें, जैसे <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>

अभिमुखता अनुपात

पहलू अनुपात को संशोधक वर्गों के साथ अनुकूलित किया जा सकता है। डिफ़ॉल्ट रूप से निम्नलिखित अनुपात वर्ग प्रदान किए जाते हैं:

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

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

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