इमेजिस

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

उत्तरदायी छवियां

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

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

एसवीजी छवियां और आईई 10

इंटरनेट एक्सप्लोरर 10 में, एसवीजी छवियों के साथ .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>