बूस्ट्रैप 5 इमेज

कोर्स प्रशंसा:

इमेज आकार

गोलाकार .rounded

उदाहरण

क्लास इमेज को गोलाकार बनाती है:

आप खुद से प्रयास करें

<img src="flower.jpg" class="rounded" alt="Flower">

गोलाकार .rounded-circle

उदाहरण

क्लास इमेज को गोलाकार बनाती है:

आप खुद से प्रयास करें

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

टुलीप .img-thumbnail

उदाहरण

क्लास इमेज को टुलीप बनाती है (सीमा सहित):

आप खुद से प्रयास करें

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

इमेज को जस्ता करें इस्तेमाल करें .float-start क्लास इमेज को बाएँ तरफ फ्लॉटिंग करती है, या .float-end

उदाहरण

दाएँ तरफ फ्लॉटिंग:
<img src="tulip.jpg" class="float-start">

आप खुद से प्रयास करें

<img src="tulip.jpg" class="float-end">

केंद्रित इमेज इमेज को केंद्रित करने के लिए, हमने इमेज को utility क्लास जोड़ी हैं .mx-auto (margin:auto) और .d-block

उदाहरण

(display:block)：

आप खुद से प्रयास करें

<img src="tulip.jpg" class="mx-auto d-block">

रिस्पांसिव इमेज

इमेज के आकार हैं। स्क्रीन भी ऐसा है। रिस्पांसिव इमेज स्क्रीन आकार के अनुसार स्वचालित रूप से समायोजित हो जाएगी। .img-fluid क्लास जोड़ें <img> टैग के द्वारा रिस्पांसिव इमेज को बनाया जाता है। फिर इमेज अच्छी तरह से पैर एलिमेंट के अंदर समायोजित हो जाएगी।

.img-fluid क्लास को इमेज के लिए लागू करें max-width: 100%; और height: auto; ：

उदाहरण

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

आप खुद से प्रयास करें