प्रतिमा
प्रतिसादात्मक वर्तनामध्ये प्रतिमा निवडण्यासाठी दस्तऐवज आणि उदाहरणे (जेणेकरून ते त्यांच्या मूळ घटकांपेक्षा कधीही मोठे होत नाहीत) आणि त्यांना हलक्या शैली जोडतात—सर्व वर्गांद्वारे.
प्रतिसादात्मक प्रतिमा
बूटस्ट्रॅपमधील प्रतिमा यासह प्रतिसादात्मक बनविल्या जातात .img-fluid
. max-width: 100%;
आणि height: auto;
प्रतिमेवर लागू केले जातात जेणेकरून ते मूळ घटकासह मोजले जाईल.
<img src="..." class="img-fluid" alt="...">
SVG प्रतिमा आणि इंटरनेट एक्सप्लोरर
इंटरनेट एक्सप्लोरर 10 आणि 11 मध्ये, SVG प्रतिमा .img-fluid
असमान आकाराच्या आहेत. याचे निराकरण करण्यासाठी, जोडा width: 100%;
किंवा .w-100
आवश्यक तेथे. हे निराकरण चुकीच्या पद्धतीने इतर प्रतिमा स्वरूपनाचे आकार देते, त्यामुळे बूटस्ट्रॅप आपोआप लागू होत नाही.
प्रतिमा लघुप्रतिमा
आमच्या सीमा-त्रिज्या युटिलिटिज.img-thumbnail
व्यतिरिक्त, तुम्ही इमेजला गोलाकार 1px बॉर्डर दिसण्यासाठी वापरू शकता .
<img src="..." class="img-thumbnail" alt="...">
प्रतिमा संरेखित करणे
हेल्पर फ्लोट वर्ग किंवा मजकूर संरेखन वर्गांसह प्रतिमा संरेखित करा . मार्जिन युटिलिटी क्लास वापरून 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>