အရင်းမြစ် ပုံစံ ဖန်တီးလိုက်ခြင်း

အရင်းမြစ် ပုံစံ ပြောင်းလဲမှု ကို ဖန်တီးလိုက်ခြင်း

ပထမ အဆင့် - HTML ထပ်ထည့်ထား

<img src="nature.jpg" alt="Nature" class="responsive">

ဒုတိယ အဆင့် - CSS ထပ်ထည့်ထား

အရင်းမြစ် ပုံစံ ကို ထိပ်သီး နှင့် သို့မဟုတ် အရင်းမြစ် ပုံစံ ထိ ချဲ့ချက် မပြုလိမ့်မည် ဟူ၍ ကြိုးစား သင့်သည့်အတွက် width ဗီဇ သတ်မှတ်ထား 100%,height သတ်မှတ်ထား auto:

ဌာန

.responsive {
  width: 100%;
  height: auto;
}

ကိုယ်တိုင် စစ်ဆေးကြည့်

အရင်းမြစ် ပုံစံ ကို သို့မဟုတ် အရင်းမြစ် ပုံစံ ထိ ချဲ့ချက် မပြုလိမ့်မည် ဟူ၍ ကြိုးစား သင့်သည့်အတွက် max-width: 100%:

ဌာန

.responsive {
  max-width: 100%;
  height: auto;
}

ကိုယ်တိုင် စစ်ဆေးကြည့်

အရင်းမြစ် ပုံစံ ကို အကြီးအကျယ် ချဲ့ချက် ပြီး အရင်းမြစ် ပုံစံ ထိ ချဲ့ချက် မပြုလိမ့်မည် ဟူ၍ ကြိုးစား သင့်သည့်အတွက် max-width ဗီဇ နှင့် သင်္ကပတ် ပုံတူခြင်း

ဌာန

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

ကိုယ်တိုင် စစ်ဆေးကြည့်

နေရာတိုက်

教程：CSS 图像

教程：CSS 响应式网页设计