HTML Picture ve Source Etiketlerinin Yapısı!

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 …