ചിത്രങ്ങൾ
പ്രതികരണാത്മക സ്വഭാവത്തിലേക്ക് ചിത്രങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും (അതിനാൽ അവ ഒരിക്കലും അവയുടെ മാതൃ ഘടകങ്ങളേക്കാൾ വലുതായിരിക്കില്ല) കൂടാതെ അവയ്ക്ക് ഭാരം കുറഞ്ഞ ശൈലികൾ ചേർക്കുക-എല്ലാം ക്ലാസുകളിലൂടെ.
പ്രതികരിക്കുന്ന ചിത്രങ്ങൾ
ബൂട്ട്സ്ട്രാപ്പിലെ ഇമേജുകൾ ഉപയോഗിച്ച് പ്രതികരിക്കുന്നതാണ് .img-fluid
. max-width: 100%;
കൂടാതെ height: auto;
ചിത്രത്തിലേക്ക് പ്രയോഗിക്കുന്നതിനാൽ അത് പാരന്റ് എലമെന്റിനൊപ്പം സ്കെയിലാകും.
<img src="..." class="img-fluid" alt="...">
SVG ഇമേജുകളും ഇന്റർനെറ്റ് എക്സ്പ്ലോററും
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 10, 11 എന്നിവയിൽ, SVG ഇമേജുകൾ .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>