விகிதங்கள்
ஒரு உறுப்பை நீங்கள் தேர்ந்தெடுக்கும் விகிதத்தை பராமரிக்க உருவாக்கப்பட்ட போலி கூறுகளைப் பயன்படுத்தவும். பெற்றோரின் அகலத்தின் அடிப்படையில் வீடியோ அல்லது ஸ்லைடுஷோ உட்பொதிப்புகளைக் கையாளுவதற்கு ஏற்றது.
பற்றி
<iframe>
s, <embed>
s, <video>
s மற்றும் s போன்ற வெளிப்புற உள்ளடக்கத்தின் விகிதங்களை நிர்வகிக்க விகித உதவியாளரைப் பயன்படுத்தவும் <object>
. இந்த உதவியாளர்கள் எந்த நிலையான HTML குழந்தை உறுப்புகளிலும் பயன்படுத்தப்படலாம் (எ.கா., a <div>
அல்லது <img>
). பாங்குகள் பெற்றோர் .ratio
வகுப்பிலிருந்து நேரடியாக குழந்தைக்குப் பயன்படுத்தப்படுகின்றன.
தோற்ற விகிதங்கள் ஒரு சாஸ் வரைபடத்தில் அறிவிக்கப்பட்டு ஒவ்வொரு வகுப்பிலும் CSS மாறி மூலம் சேர்க்கப்படும், இது தனிப்பயன் விகிதங்களையும் அனுமதிக்கிறது .
frameborder="0"
உங்களுக்காக நாங்கள் மேலெழுதுவதால் உங்கள்
<iframe>
கள்
தேவையில்லை
.
உதாரணமாக
எந்த உட்பொதிப்பையும், ஒரு <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%)
);