प्रमाणां आसात

संबंदीं

<iframe>s, <embed>s, <video>s, आनी s सारकिल्या भायल्या आशयाचे आस्पॅक्ट रेशियो वेवस्थापन करपाक प्रमाण मदतगार वापरात <object>. हे मदतगार खंयच्याय मानक HTML बाल घटकाचेरूय वापरूं येतात (देखीक, a <div>वा <img>). पालक .ratioवर्गांतल्यान थेट भुरग्याक शैली लागू करतात.

आस्पॅक्ट रेशियो Sass नकाशांत जाहीर केल्यात आनी CSS चक्रा वरवीं दरेका वर्गांत आस्पावतात, जे सानुकूल आस्पॅक्ट रेशियोकय परवानगी दिता .

उदारण

खंयचोय एम्बेड, सारको <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नकासो आसा. तुमकां आवडटा तसो नकासो बदलचो आनी तुमचो Sass परतून संकलित करचो तांकां वापरांत घालपाक.

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