गुणोत्तर

बद्दल

<iframe>s, <embed>s, <video>s आणि s सारख्या बाह्य सामग्रीचे गुणोत्तर व्यवस्थापित करण्यासाठी गुणोत्तर मदतनीस वापरा <object>. <div>हे मदतनीस कोणत्याही मानक HTML चाइल्ड एलिमेंटवर (उदा., a किंवा <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>

Sass नकाशा

मध्ये _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%)
);