in English

छवियां

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

प्रतिक्रियाशील छवियां

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

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

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