इमेजिस
छवियों को प्रतिक्रियाशील व्यवहार में चुनने के लिए दस्तावेज़ीकरण और उदाहरण (ताकि वे कभी भी अपने मूल तत्वों से बड़े न हों) और उनमें हल्की शैली जोड़ें—सभी कक्षाओं के माध्यम से।
उत्तरदायी छवियां
बूटस्ट्रैप में छवियों को उत्तरदायी बनाया जाता है .img-fluid
। max-width: 100%;
और height: auto;
छवि पर लागू होते हैं ताकि यह मूल तत्व के साथ स्केल हो जाए।
एसवीजी इमेज और इंटरनेट एक्सप्लोरर
Internet Explorer 10 और 11 में, SVG छवियों .img-fluid
का आकार अनुपातहीन होता है। इसे ठीक करने के लिए, जोड़ें width: 100%;
या .w-100
जहां आवश्यक हो। यह फिक्स अन्य छवि प्रारूपों को अनुचित रूप से आकार देता है, इसलिए बूटस्ट्रैप इसे स्वचालित रूप से लागू नहीं करता है।
छवि थंबनेल
हमारी सीमा-त्रिज्या उपयोगिताओं के.img-thumbnail
अतिरिक्त, आप किसी छवि को गोल 1px बॉर्डर स्वरूप देने के लिए उपयोग कर सकते हैं ।
छवियों को संरेखित करना
छवियों को हेल्पर फ्लोट क्लासेस या टेक्स्ट अलाइनमेंट क्लासेस के साथ संरेखित करें । block
-लेवल इमेज को मार्जिन यूटिलिटी क्लास का उपयोग करके.mx-auto
केंद्रित किया जा सकता है ।
तस्वीर
यदि आप किसी विशिष्ट के लिए एक से अधिक तत्वों <picture>
को निर्दिष्ट करने के लिए तत्व का उपयोग कर रहे हैं , तो सुनिश्चित करें कि कक्षाओं को टैग में जोड़ा जाए न कि टैग में।<source>
<img>
.img-*
<img>
<picture>