Web Design Responsiv - Imagini. Elementul HTML5 picture. Asistență browser. Atributul srcset. Atributul media. Regula CSS @media.

Elementul HTML5 <picture>

HTML5 a introdus elementul <picture>, care vă permite să definiți mai multe imagini.

Asistență browser (Browser Support)



Elementul <picture> funcționează similar cu elementele <video> și <audio>. Configurați surse diferite, iar prima sursă care se potrivește preferințelor este cea utilizată:

Exemplu:

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

Atributul srcset este necesar și definește sursa imaginii.

Atributul media este opțional și acceptă interogările media (media queries) pe care le găsiți în regula CSS @media.

De asemenea, ar trebui să definiți un element <img> pentru browserele care nu acceptă elementul <picture>.