HTML <picture> -elementti

Määrittely ja käyttö

<picture> Merkki tekee web-kehittäjistä joustavampia tiettyjen kuvaresurssien määrittämisessä.

<picture> Elementin yleisin käyttötapa on responsiivisessa suunnittelussa. Voit suunnitella useita kuvia, jotta ne täyttävät selaimen näyttöalustan paremmin kuin yksi kuva, joka suurennetaan tai pienennetään suhteessa näyttöalustan leveyteen.

<picture> elementti sisältää kaksi merkkiä: yhden tai useita <source>-merkki ja <img>-merkki.

Selaaja etsii ensimmäisen <source>-elementin, joka vastaa nykyisen näyttöalustan leveyttä, ja sitten se näyttää oikean kuvan (srcset-ominaisuudessa määritetty). <img>-elementti toimii <picture> Elementin viimeinen lapsielementti on välttämätön, ja sitä käytetään varana, jos mikään source-merkki ei täsmää.

Vinkki:<picture> elementin toiminta on samanlainen kuin <video> ja <audio> Samankaltaisia. Voit asettaa eri lähteitä, ja ensisijaisen valinnan mukainen lähde käytetään.

Lisäksi:

HTML oppituntio:HTML <picture> - kuva

CSS oppituntio:CSS-responsiivinen suunnittelu - kuva

Esimerkki

<picture> Tunnisteen käyttötapoja:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Kukat" style="width:auto;">
</picture>

Kokeile itse

Muuttujat

<picture> Tunniste tukee myös HTML-muuttujat.

Tapahtumaparametrit

<picture> Tunniste tukee myös HTML-tapahtumaparametrit.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä merkintää.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0