in English

छवियन के बा

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

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

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

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">
एसवीजी इमेज आ इंटरनेट एक्सप्लोरर के बारे में बतावल गइल बा

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

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

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

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

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

हेल्पर फ्लोट क्लास या टेक्स्ट संरेखण क्लास के साथ छवि के संरेखित करीं . block-स्तर के छवि के .mx-autoमार्जिन उपयोगिता वर्ग के उपयोग करके केंद्रित कइल जा सकेला .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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>