Middle

Któty tag HTML pomaga ładować różne obrazy dla różnych rozdzielczości ekranu?

sobes.tech AI

Odpowiedź od AI

Aby w HTML załadować różne obrazy w zależności od rozdzielczości ekranu, używa się tagu <picture>. Wewnątrz można wskazać kilka <source> z atrybutem media, który określa warunki wyboru obrazu, oraz tag <img> z obrazem zapasowym.

Przykład:

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

W tym przykładzie przeglądarka wybierze large.jpg, jeśli szerokość ekranu wynosi 800px lub więcej, medium.jpg dla szerokości od 400px do 799px, i small.jpg dla mniejszych ekranów.

Dla prostych przypadków można również użyć atrybutu srcset w tagu <img>, podając różne obrazy z ich rozmiarami.

Poprzednia Dalej