တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်း - ရုပ်ပုံများ
စာမျက်နှာနှင့် အံဝင်ခွင်ကျဖြစ်မည့် ပုံစကေးများကို ကြည့်ရှုရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။
width Property ကိုအသုံးပြုခြင်း။
ပိုင်ဆိုင်မှု ကို width
ရာခိုင်နှုန်းတစ်ခုအဖြစ် သတ်မှတ်ထားပြီး height
ပိုင်ဆိုင်မှုကို "အော်တို" ဟု သတ်မှတ်ပါက ရုပ်ပုံသည် တုံ့ပြန်မှုရှိပြီး အပေါ်နှင့်အောက် စကေးရှိလိမ့်မည်-
ဥပမာ
img {
width: 100%;
height: auto;
}
အထက်ဖော်ပြပါ ဥပမာတွင်၊ ပုံသည် ၎င်း၏မူလအရွယ်အစားထက် ပိုကြီးစေရန် စကေးချဲ့နိုင်သည်ကို သတိပြုပါ။ ပိုမိုကောင်းမွန်သောဖြေရှင်းချက်တစ်ခုသည် များစွာသောကိစ္စများတွင်၊
max-width
ပိုင်ဆိုင်မှုအစား ပိုင်ဆိုင်မှုကိုအသုံးပြုခြင်းဖြစ်လိမ့်မည်။
max-width ပိုင်ဆိုင်မှုကို အသုံးပြုခြင်း။
ပိုင်ဆိုင်မှုကို 100% ဟု သတ်မှတ်ထားပါ က max-width
ပုံသည် လိုအပ်ပါက အရွယ်အစား လျှော့ကျသွားမည်ဖြစ်ပြီး၊ ၎င်း၏မူလအရွယ်အစားထက် ပိုကြီးစေရန် ဘယ်သောအခါမှ စကေးမတက်ပါနှင့်။
ဥပမာ
img {
max-width: 100%;
height: auto;
}
ဥပမာ ဝဘ်စာမျက်နှာသို့ ပုံတစ်ခုထည့်ပါ။
ဥပမာ
img {
width: 100%;
height: auto;
}
နောက်ခံပုံများ
နောက်ခံပုံများသည် အရွယ်အစားပြောင်းလဲခြင်းနှင့် စကေးချဲ့ခြင်းတို့ကိုလည်း တုံ့ပြန်နိုင်ပါသည်။
ဤနေရာတွင် မတူညီသော နည်းလမ်းသုံးမျိုးကို ပြသပါမည်။
1. background-size
ပိုင်ဆိုင်မှုကို "contain" ဟု သတ်မှတ်ပါက၊ နောက်ခံပုံသည် အတိုင်းအတာနှင့် အကြောင်းအရာဧရိယာကို အံကိုက်ဖြစ်အောင် ကြိုးစားပါ။ သို့သော်၊ ရုပ်ပုံသည် ၎င်း၏ အချိုးအစားကို ထိန်းသိမ်းထားမည် (ပုံ၏ အကျယ်နှင့် အမြင့်ကြား အချိုးကျ ဆက်နွယ်မှု)။
ဒါကတော့ CSS ကုဒ်ပါ။
ဥပမာ
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. background-size
ပိုင်ဆိုင်မှုကို "100% 100%" ဟု သတ်မှတ်ထားပါက၊ အကြောင်းအရာဧရိယာတစ်ခုလုံးကို ဖုံးလွှမ်းရန် နောက်ခံပုံသည် ဆန့်သွားလိမ့်မည်-
ဒါကတော့ CSS ကုဒ်ပါ။
ဥပမာ
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. background-size
ပိုင်ဆိုင်မှုကို "ကာဗာ" ဟု သတ်မှတ်ပါက၊ အကြောင်းအရာဧရိယာတစ်ခုလုံးကို ဖုံးလွှမ်းရန် နောက်ခံပုံသည် အတိုင်းအတာတစ်ခု ဖြစ်လာမည်ဖြစ်သည်။ "ကာဗာ" တန်ဖိုးသည် ရှုထောင့်အချိုးကို ထိန်းသိမ်းထားကြောင်း သတိပြုပါ၊ နောက်ခံပုံ၏ အစိတ်အပိုင်းအချို့ကို ညှပ်ထားနိုင်သည်-
ဒါကတော့ CSS ကုဒ်ပါ။
ဥပမာ
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
မတူညီသော စက်များအတွက် မတူညီသောပုံများ
ကြီးမားသောရုပ်ပုံသည် ကွန်ပြူတာဖန်သားပြင်ကြီးတွင် ပြီးပြည့်စုံနိုင်သော်လည်း ကိရိယာသေးသေးလေးတွင် အသုံးမဝင်ပါ။ ဘာပဲဖြစ်ဖြစ် ပုံကြီးတစ်ပုံကို စကေးချတဲ့အခါ ဘာကြောင့် တင်တာလဲ။ ဝန်အားလျှော့ချရန် သို့မဟုတ် အခြားအကြောင်းများကြောင့်၊ မတူညီသောစက်ပစ္စည်းများတွင် မတူညီသောပုံများကိုပြသရန် မီဒီယာမေးမြန်းချက်များကို သင်အသုံးပြုနိုင်ပါသည်။
ဤသည်မှာ စက်ပစ္စည်းအမျိုးမျိုးတွင် ပြသမည့် ကြီးမားသောပုံတစ်ပုံနှင့် သေးငယ်သည့်ပုံတစ်ပုံဖြစ်သည်-
ဥပမာ
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
ဘရောက်ဆာ အကျယ်အစား စက်ပစ္စည်းအကျယ်ကို စစ်ဆေးပေးသည့်
မီဒီယာမေးမြန်းမှု min-device-width
အစား၊ ကို သုံးနိုင်သည်။ min-width
ထို့နောက် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းသည့်အခါ ပုံသည် ပြောင်းလဲမည်မဟုတ်ပါ-
ဥပမာ
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
HTML <picture> Element
HTML <picture>
ဒြပ်စင်သည် ရုပ်ပုံအရင်းအမြစ်များကို သတ်မှတ်ရာတွင် ဝဘ်ဆော့ဖ်ဝဲရေးဆွဲသူများကို ပိုမိုပျော့ပြောင်းစေသည်။
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture>
element works similar to the <video>
and
<audio>
elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset
attribute is required, and defines the source of the image.
The media
attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img>
element for browsers that do not support the
<picture>
element.