HTML <source> srcset ominaisuus

HTML <source> -elementti

Määrittely ja käyttö

srcset Ominaisuus määrittää eri tilanteissa käytettävien kuvien URL-osoitteet.

Kun <source> käytetään <picture> Tässä tapauksessa tämä ominaisuus on välttämätön.

Esimerkki

Yksi elementti, joka sisältää kaksi alkuperäistä tiedostoa ja varavoiman kuvan:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Kokeile itse

Syntaksi

<source srcset="URL">

Ominaisuusarvo

Arvo Kuvaus
URL

Määrittää kuvan URL-osoitteen.

Mahdolliset arvot:

  • Absoluuttinen URL - osoittaa toiseen verkkosivustoon (esim. href="http://www.example.com/flower.jpg")
  • Suhteellinen URL - osoittaa verkkosivuston sisäiseen tiedostoon (esim. href="flower.jpg")

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan siihen ominaisuuden selaimen version.

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

HTML <source> -elementti