ಅನುಪಾತಗಳು

ಬಗ್ಗೆ

<iframe>s, <embed>s, <video>s ಮತ್ತು s ನಂತಹ ಬಾಹ್ಯ ವಿಷಯದ ಆಕಾರ ಅನುಪಾತಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುಪಾತ ಸಹಾಯಕವನ್ನು ಬಳಸಿ <object>. ಈ ಸಹಾಯಕರನ್ನು ಯಾವುದೇ ಪ್ರಮಾಣಿತ HTML ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿಯೂ ಬಳಸಬಹುದು (ಉದಾ, a <div>ಅಥವಾ <img>). .ratioಪೋಷಕ ವರ್ಗದಿಂದ ನೇರವಾಗಿ ಮಗುವಿಗೆ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ .

ಆಕಾರ ಅನುಪಾತಗಳನ್ನು ಸಾಸ್ ನಕ್ಷೆಯಲ್ಲಿ ಘೋಷಿಸಲಾಗುತ್ತದೆ ಮತ್ತು 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ನಕ್ಷೆ ಇಲ್ಲಿದೆ. ನೀವು ಬಯಸಿದಂತೆ ನಕ್ಷೆಯನ್ನು ಮಾರ್ಪಡಿಸಿ ಮತ್ತು ಅವುಗಳನ್ನು ಬಳಸಲು ನಿಮ್ಮ ಸಾಸ್ ಅನ್ನು ಮರುಸಂಕಲಿಸಿ.

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