စတုတ္ထ အောက်ဆီယံ ဝတ္ထု ဒီမိုကရေစီ - ဓါတ်ပုံ

အကျုံး

width အချင်း သတ်မှတ်ထားသည် အကျုံး width

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

အကျုံး သတ်မှတ်ထားသော တိုင်းပေါ် နှင့် အမြင့် သတ်မှတ်ထားသော "auto" ဖြစ်လျှင် ပုံ အရွယ်အစား ပြင်းအားပေး သို့မဟုတ် လျှော့ကျ လာသည်: max-width အချင်း

max-width အချင်း သတ်မှတ်ထားသည်

အကျုံး max-width အချင်း သတ်မှတ်ထားသော 100% ဖြစ်လျှင် ပုံ အရွယ်အစား အချိန်နှင့် လျှော့ကျ ပြီး ပုံ အရွယ်အစား အများဆုံး ပြင်းအားပေး သည် ဘဲ ပြင်းအားပေး ရန် ကြိုးစားသည်:

实例

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 属性设置为 "cover"，则背景图像将缩放以覆盖整个内容区域。请注意，"cover" 值保持长宽比，且可能会裁剪背景图像的某部分：

这是 CSS 代码：

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

亲自试一试

为不同设备准备不同图像

大幅的图像在大型计算机屏幕上可以完美显示，但在小型设备上就没用了。为什么在不得不缩小图像时又加载大图像呢？为了减少负载或出于任何其他原因，您可以使用媒体查询在不同的设备上显示不同的图像。

အရာ အချင်း သုံးပုံပေါင်း ဖြင့် ပြုလုပ်ခြင်း ဖြစ်သည်။ အရာ အချင်း အချင်း များ ကို မိုက်တိုမြို့ အကွက် တစ်ခု တည်းသွားပြီး ပြောင်းလဲသည်:

实例

/* 400 ပုံအချင်း အောက် သို့မဟုတ် အကွက်အချင်း: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 ပုံအချင်း အထက် သို့မဟုတ် အကွက်အချင်း: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

သင့် သုံးနိုင်သော စက်မှုကို min-device-width အခု min-width အကွက် အချင်း ကို သတ်မှတ်ခြင်း ဖြင့် ဘရောက်သူ အချင်း ကို ကျမ်းသစ် အချင်း ကို သတ်မှတ်ခြင်း မဟုတ်။ ဘရောက်သူ အချင်း ကို ပြင်ဆင်လျှင် အရာအကြောင်း ပြောင်းလဲလိမ့်မည်:

实例

/* 400 ပုံအချင်း အောက် သို့မဟုတ် အကွက်အချင်း: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 ပုံအချင်း အထက် သို့မဟုတ် အကွက်အချင်း: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

HTML5 <picture> အရာ

HTML5 တွင် <picture> အရာ၊ အရာအကြောင်း သုံးပုံပေါင်း ဖြင့် ဖော်ပြနိုင်သည်:

ဘရောက်သူ အကူအညီ

38.0 13 38.0 9.1 25.0

<picture> အရာ၏ လုပ်သုံးမှု ကို <video> နှင့် <audio> အရာများ။ ကျမ်းသစ်ကို တခုခု စတင်ကျမ်းသစ်တစ်ခု ဖြစ်သည်။ ဖြစ်ပေါ်လာသော ကိုယ်စားပုံဖြင့် ပထမ ကိုယ်စားပုံ ဖြစ်သည်:

实例

<picture>
  
  
  Flowers

亲自试一试

srcset 属性是必需的，它定义图像的来源。

media အခြေခံ အပြင် စတုတ္ထ @media အခြေခံ အခြေခံ အောက်ဆီယံ စက်ပွဲ

အကြိမ်ကြားအောက်ဆီယံ အခြေခံ စက်ပွဲ <picture> အရာ အခြေခံ <img> အရာ