ރޭޝިއޯސް އެވެ
އެލިމެންޓެއް ތިމާ އިޚްތިޔާރުކުރާ އެސްޕެކްޓް ރޭޝިއޯ ބެލެހެއްޓޭނެ ގޮތަށް ހެދުމަށްޓަކައި ޖެނެރޭޓް ކުރެވިފައިވާ ސޫޑޯ އެލިމެންޓްތައް ބޭނުން ކުރާށެވެ. ބެލެނިވެރިޔާގެ ފުޅާމިނަށް ބަލައިގެން ވީޑިއޯ ނުވަތަ ސްލައިޑްޝޯ އެންބެޑްސް ރެސްޕޮންސިވްކޮށް ހެންޑްލް ކުރުމަށް ފުރިހަމަ އެވެ.
ގުޅިގެން
<iframe>
s، <embed>
s، <video>
s، އަދި s ފަދަ ބޭރު ކޮންޓެންޓްގެ އެސްޕެކްޓް ރޭޝިއޯތައް މެނޭޖްކުރުމަށް ރޭޝިއޯ ހެލްޕަރ ބޭނުން ކުރާށެވެ <object>
. މި ހެލްޕަރުން ކޮންމެ ސްޓޭންޑަރޑް އެޗްޓީއެމްއެލް ޗައިލްޑް އެލިމެންޓެއްގައި ވެސް (އެބަހީ، a <div>
ނުވަތަ <img>
) ބޭނުންކުރެވިދާނެއެވެ. ސްޓައިލްތައް ބެލެނިވެރި .ratio
ކްލާހުން ސީދާ ކުއްޖާއަށް އަމަލުކުރެއެވެ.
އެސްޕެކްޓް ރޭޝިއޯތައް ސާސް މެޕެއްގައި ޑިކްލެއާކޮށް ކޮންމެ ކްލާހެއްގައި ސީއެސްއެސް ވެރިއޭބަލް މެދުވެރިކޮށް ހިމަނާފައިވާއިރު، މިއީ ކަސްޓަމް އެސްޕެކްޓް ރޭޝިއޯތައް ވެސް ހުއްދަކޮށްދޭ ކަމެކެވެ .
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-*
ކްލާހެއްގައި ވެސް ސެލެކްޓަރުގައި ސީއެސްއެސް ކަސްޓަމް ޕްރޮޕަޓީ (ނުވަތަ ސީއެސްއެސް ވެރިއޭބަލް) އެއް ހިމެނެއެވެ. މި ސީއެސްއެސް ވެރިއޭބަލް އޯވަރރައިޑްކޮށްގެން ކަސްޓަމް އެސްޕެކްޓް ރޭޝިއޯތައް އުފެއްދުމަށް ފްލައިގައި ތިމާގެ ފަރާތުން ކޮންމެވެސް އ��ވަސް ހިސާބަކުން ކުރެވިދާނެއެވެ.
މިސާލަކަށް 2x1 އެސްޕެކްޓް ރޭޝިއޯ އުފެއްދުމަށްޓަކައި، އަށް ސެޓް --bs-aspect-ratio: 50%
ކުރާށެވެ .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
މި ސީއެސްއެސް ވެރިއޭބަލްގެ ސަބަބުން ބްރޭކްޕޮއިންޓްތަކުގެ ތެރެއިން އެސްޕެކްޓް ރޭޝިއޯ ބަދަލުކުރުމަށް ފަސޭހަވެގެންދެއެވެ. ތިރީގައި މިވަނީ ފެށުމަށް 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%)
);