ތަސްވީރުތަކެވެ
ރެސްޕޮންސިވް ބިހޭވިއަރ އަށް ތަސްވީރުތައް ހޮވުމަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް (އެހެންވީމާ އެއީ ދުވަހަކުވެސް އެތަކެތީގެ ބެލެނިވެރި އުފެއްދުންތަކަށްވުރެ ބޮޑު އެއްޗަކަށް ނުވާނެ) އަދި އެއަށް ލުއި ސްޓައިލްތައް އިތުރުކުރުން- މިހުރިހާ ކަމެއްވެސް ކްލާސްތައް މެދުވެރިކޮށް.
ޖަވާބުދާރީވާ ތަސްވީރުތަކެވެ
ބޫޓްސްޓްރެޕްގައި ހުންނަ ތަސްވީރުތައް ރެސްޕޮންސިވް ކޮށްފައި ހުންނަނީ .img-fluid
. max-width: 100%;
އަދި height: auto;
ބެލެނިވެރި އެލިމެންޓާއެކު ސްކޭލް ވާގޮތަށް ތަސްވީރަށް ޖަހާފައި ހުރެއެވެ.
<img src="..." class="img-fluid" alt="...">
އެސްވީޖީ އިމޭޖްތަކާއި އިންޓަނެޓް އެކްސްޕްލޯރަރ އެވެ
އިންޓަރނެޓް އެކްސްޕްލޯރަރ 10 އަދި 11 ގައި އެސްވީޖީ އިމޭޖްސް ވިތު .img-fluid
ގެ ސައިޒު ނިސްބަތުން ބޮޑުވެއެވެ. މިކަން ރަނގަޅު ކުރުމަށްޓަކައި އިތުރުކުރުން width: 100%;
ނުވަތަ .w-100
ބޭނުންވާ ތަންތަނުގައި އިތުރުކުރުން. މި ފިކްސް އިން އެހެން އިމޭޖް ފޯމެޓްތައް ރަނގަޅަށް ސައިޒް ނުކުރެވޭތީ ބޫޓްސްޓްރެޕް އިން އޮޓޮމެޓިކުން އެކަން އެޕްލައި ނުކުރެއެވެ.
އިމޭޖް ތަމްބްނެއިލްސް
އަޅުގަނޑުމެންގެ ބޯޑަރ-ރޭޑިއަސް ޔުޓިލިޓީސްގެ.img-thumbnail
އިތުރުން ، ތަސްވީރަކަށް ވަށައިގެންވާ 1px ބޯޑަރ ސިފައެއް ދިނުމަށް ބޭނުންކުރެވިދާނެއެވެ .
<img src="..." class="img-thumbnail" alt="...">
ތަސްވީރުތައް އެލައިންކުރުން
ހެލްޕަރ ފްލޯޓް ކްލާސް ނުވަތަ ޓެކްސްޓް އެލައިންމަންޓް ކްލާސްތަކާ ތަސްވީރުތައް އެލައިން ކުރުން . block
-ލެވެލްގެ ތަސްވީރުތައް ސެންޓަރ ކުރެވޭނީ މާރޖިން ޔުޓިލިޓީ ކްލާސް ބޭނުންކޮށްގެންނެވެ ..mx-auto
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
ފޮޓޯ
<picture>
ވަކި އެއްޗަކަށް އެތައް <source>
އެލިމެންޓެއް ކަނޑައެޅުމަށް އެލިމެންޓް ބޭނުންކުރާނަމަ ، ޓެގަށް ކްލާސްތައް އިތުރުކުރުން އަދި ޓެގަށް <img>
އިތުރުކުރުން ނޫންކަން ޔަގީންކުރައްވާށެވެ ..img-*
<img>
<picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>