बूटस्ट्रैप 4 छवियां
बूटस्ट्रैप 4 छवि आकार
कोने पर गोलाकार आकृति:
वृत्त:
थंबनेल:
कोने पर गोलाकार आकृति
वर्ग एक छवि में .roundedगोल कोनों को जोड़ता है:
उदाहरण
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
वृत्त
.rounded-circleवर्ग छवि को एक सर्कल में आकार देता है :
उदाहरण
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
थंबनेल
.img-thumbnailवर्ग छवि को एक थंबनेल (सीमाबद्ध) में आकार देता है :
उदाहरण
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
छवियों को संरेखित करना
.float-rightएक छवि को कक्षा के साथ दाईं ओर या बाईं ओर फ़्लोट करें .float-left:
उदाहरण
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
केंद्रित छवि
.mx-autoछवि में उपयोगिता वर्ग (मार्जिन: ऑटो) और .d-block(डिस्प्ले: ब्लॉक) जोड़कर एक छवि को केंद्र में रखें :
उदाहरण
<img src="paris.jpg" class="mx-auto d-block">
उत्तरदायी छवियां
छवियां सभी आकारों में आती हैं। तो स्क्रीन करो। रिस्पॉन्सिव इमेज स्क्रीन के आकार में फिट होने के लिए अपने आप एडजस्ट हो जाती हैं।
टैग में एक .img-fluidवर्ग जोड़कर प्रतिक्रियाशील चित्र बनाएं । <img>छवि तब मूल तत्व के लिए अच्छी तरह से स्केल हो जाएगी।
.img-fluidवर्ग लागू होता max-width: 100%;है और
छवि height: auto;पर:
उदाहरण
<img class="img-fluid" src="img_chania.jpg" alt="Chania">