Source

छवियन के बा

रिस्पांसिव बिहेवियर में छवि सभ के चुने खातिर दस्तावेजीकरण आ उदाहरण (एह से ई कबो अपना मूल तत्व सभ से बड़ ना हो जालीं) आ इनहन में हल्का शैली सभ के जोड़ल जाय-सब क्लास सभ के माध्यम से।

प्रतिक्रियाशील छवियन के बा

बूटस्ट्रैप में छवि के साथ रिस्पांसिव बनावल गइल बा .img-fluid. max-width: 100%;आ height: auto;छवि पर लागू कइल जाला ताकि ऊ मूल तत्व के साथ स्केल करे।

<img src="..." class="img-fluid" alt="Responsive image">

एसवीजी इमेज आ आईई 10 के इस्तेमाल कइल गइल बा

इंटरनेट एक्सप्लोरर 10 में, SVG इमेज के साथ .img-fluidअसमान आकार के होला। एकरा के ठीक करे खातिर width: 100% \9;जहाँ जरूरत होखे ओहिजा जोड़ दीं. ई फिक्स अन्य इमेज फॉर्मेट सभ के गलत तरीका से साइज देला, एह से बूटस्ट्रैप एकरा के स्वचालित रूप से लागू ना करे ला।

छवि के थंबनेल दिहल गइल बा

हमनी के सीमा-त्रिज्या उपयोगिता के अलावा , रउआँ .img-thumbnailकवनो छवि के गोल 1px सीमा रूप देवे खातिर इस्तेमाल कर सकत बानी ।

<img src="..." alt="..." class="img-thumbnail">

छवियन के संरेखित कइल जा रहल बा

हेल्पर फ्लोट क्लास या टेक्स्ट संरेखण क्लास के साथ छवि के संरेखित करीं . 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>