Middle

Kuris HTML žymeklis padeda įkelti skirtingus vaizdus skirtingoms ekrano raiškos?

sobes.tech AI

Atsakymas iš AI

HTML'e naudojama <picture> žymė, norint įkelti skirtingus vaizdus priklausomai nuo ekrano raiškos. Joje galima nurodyti kelis <source> su media atributu, kuris nustato sąlygas vaizdo pasirinkimui, ir <img> su atsarginiu vaizdu.

Pavyzdys:

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

Šiuo pavyzdžiu naršyklė pasirinks large.jpg, jei ekrano plotis yra 800px ar daugiau, medium.jpg – nuo 400px iki 799px, ir small.jpg – mažesniems ekranams.

Taip pat, paprastais atvejais, galima naudoti srcset atributą <img> žymoje, nurodant skirtingus vaizdus su jų dydžiais.

Ankstesnis Kitas