Middle

Farklı ekran çözünürlükleri için farklı resimler yüklemeye yardımcı olan HTML etiketi nedir?

sobes.tech yapay zeka

AI'dan gelen yanıt

HTML'de ekran çözünürlüğüne göre farklı resimler yüklemek için <picture> etiketi kullanılır. İçinde, resim seçimi için koşulları belirleyen media özniteliğine sahip birkaç <source> ve yedek resim içeren <img> etiketi bulunabilir.

Örnek:

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

Bu örnekte, tarayıcı ekran genişliği 800px veya daha fazla ise large.jpg, 400px ile 799px arasında ise medium.jpg, daha küçük ekranlar için ise small.jpg seçer.

Ayrıca, basit durumlar için <img> etiketi içinde srcset özniteliği kullanılarak farklı resimler ve boyutları belirtilebilir.

Önceki Sonraki