HTML Picture ve Source Etiketlerinin Yapısı!

#HTML

HTML Resim Öğesi picture ve source etiketlerinin kullanımı detaylı bir şekilde anlatıldı.

HTML Picture ve Source Etiketlerinin Kullanımı!

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

HTML Resim Öğesi
HTML Picture ve Source Etiketlerinin Kullanımı!

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;

HTML Picture ve Source Etiketlerinin Kullanımı!

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 …


“HTML Picture ve Source Etiketlerinin Yapısı!” için bir cevap

  1. Damla Şekerci dedi ki:

    Bunu bilmiyordum ilk defa gördüm. Teşekkürler. Devamını bekliyoruz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt ///