Source

ပုံများ

ပုံများကို တုံ့ပြန်မှုရှိသော အပြုအမူအဖြစ် ရွေးချယ်ခြင်းအတွက် စာရွက်စာတမ်းများနှင့် ဥပမာများ (ထို့ကြောင့် ၎င်းတို့သည် ၎င်းတို့၏ မိခင်ဒြပ်စင်များထက် ဘယ်သောအခါမှ ပိုကြီးမည်မဟုတ်ပါ) နှင့် ပေါ့ပါးသောပုံစံများကို အတန်းများမှတစ်ဆင့် ၎င်းတို့ထံ ပေါင်းထည့်ပါ။

တုံ့ပြန်ပုံများ

Bootstrap ရှိ ပုံများကို တုံ့ပြန်မှု ပြုလုပ်ထားသည် .img-fluid။ max-width: 100%;၎င်းကို ပင်မဒြပ်စင် နှင့် height: auto;ချိန်ညှိရန်အတွက် ပုံတွင် အသုံးချထားသည်။

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG ပုံများနှင့် IE 10

Internet Explorer 10 တွင်၊ SVG ရုပ်ပုံများ .img-fluidသည် အချိုးမပြေစွာ အရွယ်အစားရှိသည်။ ဒါကိုပြင်ဖို့ width: 100% \9;လိုအပ်တဲ့နေရာမှာ ထည့်ပါ။ ဤပြင်ဆင်မှုသည် အခြားသော ပုံဖော်မတ်များကို မှားယွင်းစွာ အရွယ်အစား ချဲ့ထွင်ထားသောကြောင့် Bootstrap သည် ၎င်းကို အလိုအလျောက် အသုံးပြုနိုင်မည်မဟုတ်ပေ။

ပုံသေးများ

ကျွန်ုပ်တို့၏နယ်စပ်-အချင်းဝက် utilities များ အပြင် ၊ .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="..." alt="..." class="img-thumbnail">

ပုံများကို ချိန်ညှိခြင်း။

ပုံများကို helper float classes သို့မဟုတ် text alignment classes နှင့် ချိန်ညှိ ပါ။ margin utility class ကို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>များစွာသောဒြပ်စင်ကို သတ်မှတ်ရန် ဒြပ်စင် ကို အသုံးပြုနေပါက၊ အတန်းများကို tag ထဲသို့ မ ထည့်ကြောင်း သေချာပါစေ ။<source><img>.img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>