Resim elemanı farklı cihazlar veya ekran boyutları için farklı resimler görüntülememize izin verir.

HTML <picture> Elemanı

HTML5, <picture>görüntü kaynaklarını belirlerken daha fazla esneklik eklemek için öğeyi tanıttı .

<picture> etiketi <source> dizilerini içerir, farklı görüntü kaynaklarını kullanabilirsiniz. Bu şekilde tarayıcı mevcut görünüme ve / veya cihaza en çok uyan görüntüyü seçebilir.

Her <source>eleman, imajının en uygun olduğu zamanı tanımlayan niteliklere sahiptir.

<picture>
  <source media="(min-width: 650px)" srcset="https://armyyazilim.com/wp-content/uploads/2019/10/css.png">
  <source media="(min-width: 465px)" srcset="https://armyyazilim.com/wp-content/uploads/2019/11/Untitled-1-13.png">
  <img src="https://armyyazilim.com/wp-content/uploads/2019/10/python-nedir.png" style="width:auto;">
</picture>

Çıktısı;

See the Pen duyarlı ölçütler by ArmyYazılım (@armyyazilim) on CodePen.

Videosu;

Not: Bir <img>öğeyi her zaman öğenin son alt öğesi olarak belirtin <picture>. <img>Eleman desteklemeyen tarayıcılar tarafından kullanılır.

Resim Öğesi ne zaman kullanılır?

<picture>Öğenin iki ana amacı vardır :

1. Bant Genişliği

Küçük bir ekranınız veya cihazınız varsa, büyük bir görüntü dosyası yüklemek gerekli değildir. Tarayıcı, ilk <source> niteliği eşleşen özellik değerleri ile kullanacak ve aşağıdaki elementlerden herhangi birini görmezden gelecek.

2. Format Desteği

Bazı tarayıcılar veya cihazlar tüm resim formatlarını desteklemeyebilir. <picture> öğeyi kullanarak tüm biçimlerin görüntülerini ekleyebilirsiniz; tarayıcı, tanıdığı ilk biçimi kullanır ve aşağıdakilerden birini yok sayar.

Örnek;

Tarayıcı tanıdığı ilk resim formatını kullanacaktır:

<picture>
  <source srcset="https://armyyazilim.com/wp-content/uploads/2019/11/Untitled-1-13.png">
  <source srcset="https://armyyazilim.com/wp-content/uploads/2019/12/picture_example.jpg">
  <img src="https://armyyazilim.com/wp-content/uploads/2019/12/reklamlar.gif" alt="Beatles" style="width:auto;">
</picture>

Çıktısı;

See the Pen ilk resim by ArmyYazılım (@armyyazilim) on CodePen.

Not: Tarayıcı, ilk <source>niteliği eşleşen özellik değerlerine sahip olarak kullanır ve sonraki <source>öğeleri yok sayar.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …