छवियन के बा
रिस्पांसिव बिहेवियर में छवि सभ के चुने खातिर दस्तावेजीकरण आ उदाहरण (एह से ई कबो अपना मूल तत्व सभ से बड़ ना हो जालीं) आ इनहन में हल्का शैली सभ के जोड़ल जाय-सब क्लास सभ के माध्यम से।
प्रतिक्रियाशील छवियन के बा
बूटस्ट्रैप में छवि के साथ रिस्पांसिव बनावल गइल बा .img-fluid
. max-width: 100%;
आ height: auto;
छवि पर लागू कइल जाला ताकि ऊ मूल तत्व के साथ स्केल करे।
<img src="..." class="img-fluid" alt="...">
एसवीजी इमेज आ इंटरनेट एक्सप्लोरर के बारे में बतावल गइल बा
इंटरनेट एक्सप्लोरर 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>