Source

इमेजिस

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

उत्तरदायी चित्र

बूटस्ट्रैप में छवियों को उत्तरदायी बनाया जाता है .img-fluidmax-width: 100%;और height: auto;छवि पर लागू होते हैं ताकि यह मूल तत्व के साथ स्केल हो जाए।

Placeholder Responsive image
<img src="..." class="img-fluid" alt="Responsive image">
एसवीजी छवियां और आईई 10

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

छवि थंबनेल

हमारी सीमा-त्रिज्या उपयोगिताओं के.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="..." alt="..." class="img-thumbnail">

छवियों को संरेखित करना

छवियों को हेल्पर फ्लोट क्लासेस या टेक्स्ट अलाइनमेंट क्लासेस के साथ संरेखित करें । 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>