CSS ကျူတိုရီရယ်

CSS ပင်မစာမျက်နှာ CSS နိဒါန်း CSS Syntax CSS ရွေးချယ်မှုများ CSS လုပ်နည်း CSS မှတ်ချက်များ CSS အရောင်များ CSS နောက်ခံများ CSS နယ်နိမိတ်များ CSS အနားသတ်များ CSS Padding CSS အမြင့်/အနံ CSS Box မော်ဒယ် CSS အကြမ်းဖျင်း CSS စာသား CSS ဖောင့်များ CSS အိုင်ကွန်များ CSS လင့်ခ်များ CSS စာရင်းများ CSS ဇယားများ CSS Display CSS Max-အကျယ် CSS ရာထူး CSS Z အညွှန်း CSS Overflow CSS Float CSS Inline-block CSS ကို ချိန်ညှိပါ။ CSS Combinators CSS Pseudo-class CSS Pseudo-ဒြပ်စင် CSS Opacity CSS Navigation Bar CSS Dropdowns CSS ရုပ်ပုံပြခန်း CSS Image Sprites CSS Attr ရွေးချယ်မှုများ CSS ပုံစံများ CSS ကောင်တာများ CSS ဝဘ်ဆိုဒ် အပြင်အဆင် CSS ယူနစ်များ CSS တိကျမှု CSS !အရေးကြီးသည်။ CSS သင်္ချာလုပ်ဆောင်ချက်များ

CSS အဆင့်မြင့်

CSS Rounded Corners CSS Border ပုံများ CSS နောက်ခံများ CSS အရောင်များ CSS အရောင်သော့ချက်စာလုံးများ CSS Gradients CSS Shadows CSS စာသားအကျိုးသက်ရောက်မှုများ CSS ဝဘ်ဖောင့်များ CSS 2D အသွင်ပြောင်းမှုများ CSS 3D အသွင်ပြောင်းမှုများ CSS အသွင်ကူးပြောင်းမှုများ CSS Animations CSS Tooltips CSS စတိုင်ပုံများ CSS Image Reflection CSS object-fit CSS object-position CSS Masking CSS ခလုတ်များ CSS Pagination CSS ကော်လံမျိုးစုံ CSS User Interface CSS အပြောင်းအလဲများ CSS Box Sizing CSS မီဒီယာမေးခွန်းများ CSS MQ နမူနာများ CSS Flexbox

CSS တုံ့ပြန်မှု

RWD မိတ်ဆက် RWD Viewport RWD Grid View RWD မီဒီယာမေးခွန်းများ RWD ပုံများ RWD ဗီဒီယိုများ RWD မူဘောင်များ RWD နမူနာများ

CSS Grid

Grid Intro ဂရစ်ကွန်တိန်နာ ဇယားကွက်

CSS SASS

SASS ကျူတိုရီရယ်

CSS နမူနာများ

CSS Templates များ CSS နမူနာများ css စာမေးပွဲ CSS လေ့ကျင့်ခန်းများ CSS လက်မှတ်

CSS ကိုးကားချက်များ

CSS အကိုးအကား CSS ရွေးချယ်မှုများ CSS လုပ်ဆောင်ချက်များ CSS အကိုးအကား Aural CSS ဝဘ်ဘေးကင်းသောဖောင့်များ CSS Animatable CSS ယူနစ်များ CSS PX-EM Converter CSS အရောင်များ CSS အရောင်တန်ဖိုးများ CSS မူရင်းတန်ဖိုးများ CSS Browser ပံ့ပိုးမှု

တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်း - ရုပ်ပုံများ


စာမျက်နှာနှင့် အံဝင်ခွင်ကျဖြစ်မည့် ပုံစကေးများကို ကြည့်ရှုရန် ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းပါ။


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.