လုပ်နည်း - တုံ့ပြန်မှုပုံများ
CSS ဖြင့် တုံ့ပြန်မှုရှိသော ပုံတစ်ပုံကို ဖန်တီးနည်းကို လေ့လာပါ။
တုံ့ပြန်မှုရှိသောပုံများသည် မျက်နှာပြင်အရွယ်အစားနှင့် ကိုက်ညီစေရန် အလိုအလျောက်ချိန်ညှိပေးပါမည်။
တုံ့ပြန်မှုအကျိုးသက်ရောက်မှုကိုကြည့်ရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ-
တုံ့ပြန်မှုပုံများဖန်တီးနည်း
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<img src="nature.jpg" alt="Nature" class="responsive">
အဆင့် 2) CSS ကိုထည့်ပါ
ရုပ်ပုံအား တုံ့ပြန်မှုအပေါ် အတက်အဆင်း နှစ်မျိုးလုံး အတိုင်းအတာဖြင့် ချဲ့ထွင်လိုပါက CSS width
ပိုင်ဆိုင်မှုကို 100% နှင့် height
အလိုအလျောက် သတ်မှတ်ရန်-
ဥပမာ
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.