Middle

Milline HTML-märgend aitab laadida erinevaid pilte erinevate ekraani resolutsioonide jaoks?

sobes.tech AI

Vastus AI-lt

HTML-is kasutatakse <picture> märgendit, et laadida erinevaid pilte sõltuvalt ekraani resolutsioonist. Selle sees saab määrata mitu <source> elementi koos media atribuudiga, mis määrab tingimused pildi valimiseks, ning <img> märgendit varupildiga.

Näide:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Näide pildist">
</picture>

Selles näites valib brauser large.jpg, kui ekraani laius on 800px või rohkem, medium.jpg vahemikus 400px kuni 799px, ja small.jpg väiksemate ekraanide jaoks.

Lihtsamate juhtude jaoks saab kasutada ka srcset atribuuti <img> märgendis, määrates erinevad pildid nende suurustega.

Eelmine Edasi