Responsive Web Design - Image

Gamit ang attribute na width

Kung width Ang attribute ay naka-set sa porsyento, at ang taas ay naka-set sa "auto", ang imahe ay maaaring sumasagot sa pagpapalaki o pagbabawasan:

Example

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

Try it yourself

Pansin na sa mga halimbawa sa itaas, ang imahe ay maaaring magbigay laki na higit sa orihinal na laki nito. Sa karamihan ng kaso, mas mabuting solusyon ay gumamit ng max-width Attribute.

Gamit ang attribute na max-width

Kung inilagay ang attribute na max-width sa 100%, ang imahe ay mababawasan ayon sa pangangailangan, ngunit hindi na mabibigyang laki na higit sa orihinal na laki nito:

Example

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

Try it yourself

Magdagdag ng imahe sa instance na web page

Example

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

Try it yourself

Ang background image

Ang background image ay maaaring sumasagot sa pagbabagong laki at pagbabalansang proporsyon.

Ito ay tatlong paraan na inilalabas namin:

1. Kung inilagay ang background-size Ang setting na "contain" ay nagpapakita na ang background image ay mababawasan at magiging kasama sa lugar ng nilalaman. Gayunpaman, ang proporsyon ng haba at laki ng imahe ay mananatiling na (ang proporsyon ng haba at taas ng imahe):

Ito ay CSS code:

Example

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

Try it yourself

2. Kung inilagay ang background-size Kung ang halaga ng attribute ay "100% 100%", ang background image ay maayos na maipalakas upang takpan ang buong lugar ng nilalaman:

Ito ay CSS code:

Example

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

Try it yourself

3. Kung background-size Kung ang halaga ng attribute ay "cover", ang background image ay maayos na maipalakas upang takpan ang buong lugar ng nilalaman. Mangyaring pansinin na ang halaga ng "cover" ay pinapanatili ang proporsyon ng laki at maaaring bawasan ang isang bahagi ng background image:

Ito ay CSS code:

Example

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

Try it yourself

Handaan ang iba't ibang imahe para sa iba't ibang aparato

Ang malaking imahe ay maayos na ipapakita sa malaking skreen ng kompyuter, ngunit hindi na ito magagamit sa maliliit na aparato. Bakit mag-download ng malaking imahe kapag kinakailangan nating iwalang-bahag ang imahe? Upang bawasan ang loob ng karga o sa anumang iba pang dahilan, maaari mong gamitin ang media query upang ipakita iba't ibang imahe sa iba't ibang aparato.

Ito ay isang malaking imahe at isang maliit na imahe, na ipapakita sa iba't ibang aparato:

Example

/* Tukoy sa mas maliit na lapad na mas maliit sa 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Tukoy sa 400 pixel o mas malaking lapad: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Try it yourself

Maaari mong gamitin ang media query min-device-width hindi min-width Para sa pagpapatunay ng lapad ng aparato, hindi ng lapad ng browser. Pagkatapos, kapag nag-aayos ka ng laki ng window ng browser, ang imahe ay hindi babago:

Example

/* Tukoy sa mas maliit na aparato na mas maliit sa 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Tukoy sa 400 pixel at mas malaking aparato: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Try it yourself

HTML5 <picture> elemento

Nakapagsimula ang HTML5 na magbigay <picture> elemento, na nagbibigay-daan sa iyo na mag-define ng ilang imahe.

Tagalang suporta ng browser

38.0 13 38.0 9.1 25.0

<picture> Ang ginagampanan ng elemento ay katulad ng <video> at <audio> Elemento. Naka-set namin ang iba't ibang pinagmulan, at ang unang pinagpili na pinagmulan ay ang kasalukuyang ginagamit na pinagmulan:

Example

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Try it yourself

srcset The attribute is required, it defines the source of the image.

media The attribute is optional, it accepts values that can be CSS @media Rule found in media queries.

Tip:You should also provide for media queries that are not supported <picture> Browser Definition of Element <img> Element.