விகிதங்கள்

ஒரு உறுப்பை நீங்கள் தேர்ந்தெடுக்கும் விகிதத்தை பராமரிக்க உருவாக்கப்பட்ட போலி கூறுகளைப் பயன்படுத்தவும். பெற்றோரின் அகலத்தின் அடிப்படையில் வீடியோ அல்லது ஸ்லைடுஷோ உட்பொதிப்புகளைக் கையாளுவதற்கு ஏற்றது.

இந்தப் பக்கத்தில்

பற்றி

<iframe>s, <embed>s, <video>s மற்றும் s போன்ற வெளிப்புற உள்ளடக்கத்தின் விகிதங்களை நிர்வகிக்க விகித உதவியாளரைப் பயன்படுத்தவும் <object>. இந்த உதவியாளர்கள் எந்த நிலையான HTML குழந்தை உறுப்புகளிலும் பயன்படுத்தப்படலாம் (எ.கா., a <div>அல்லது <img>). பாங்குகள் பெற்றோர் .ratioவகுப்பிலிருந்து நேரடியாக குழந்தைக்குப் பயன்படுத்தப்படுகின்றன.

தோற்ற விகிதங்கள் ஒரு சாஸ் வரைபடத்தில் அறிவிக்கப்பட்டு ஒவ்வொரு வகுப்பிலும் CSS மாறி மூலம் சேர்க்கப்படும், இது தனிப்பயன் விகிதங்களையும் அனுமதிக்கிறது .

சார்பு உதவிக்குறிப்பு! மறுதொடக்கத்தில்frameborder="0" உங்களுக்காக நாங்கள் மேலெழுதுவதால் உங்கள் <iframe>கள் தேவையில்லை .

உதாரணமாக

எந்த உட்பொதிப்பையும், ஒரு <iframe>, ஒரு மூல உறுப்பு .ratioமற்றும் விகித விகித வகுப்பில் மடிக்கவும். எங்களின் உலகளாவிய தேர்விக்கு நன்றி உடனடி குழந்தை உறுப்பு தானாகவே அளவிடப்படுகிறது .ratio > *.

html

<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

html

<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.

2x1

html

<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

html

<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%)
);