अनुपाताः

विषये

<iframe>s, <embed>s, <video>s , s इत्यादीनां बाह्यसामग्रीणां पक्षानुपातानाम् प्रबन्धनाय अनुपातसहायकस्य उपयोगं कुर्वन्तु <object>। एतेषां सहायकानां उपयोगः कस्मिन् अपि मानक HTML बालतत्त्वे (उदा., a <div>or <img>) अपि कर्तुं शक्यते । .ratioमातापितृवर्गात् प्रत्यक्षतया बालके शैल्याः प्रयुक्ताः भवन्ति ।

आस्पेक्ट रेश्यो एकस्मिन् Sass मानचित्रे घोषिताः भवन्ति तथा च CSS चरद्वारा प्रत्येकस्मिन् वर्गे समाविष्टाः भवन्ति, यत् कस्टम् आस्पेक्ट रेश्यो अपि अनुमन्यते .

उदाहरण

किमपि एम्बेड्, यथा an <iframe>, एकस्मिन् मूलतत्त्वे with .ratioand an aspect ratio class इत्यत्र लपेटयन्तु । अस्माकं सार्वभौमिकचयनकस्य धन्यवादेन तत्कालीनबालतत्त्वस्य आकारः स्वयमेव भवति .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 चरं breakpoints मध्ये aspect ratio परिवर्तयितुं सुलभं करोति । आरम्भार्थं निम्नलिखितम् 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%)
);