HTML5 picture ve source Etiketi Kullanımı – Tasarım Kodlama
HTML

HTML5 picture ve source Etiketi Kullanımı

HTML5 ile hayatımıza giren yeni etiketlerden bir tanesi de <picture> ve <source> etiketleri olmuştur.

Bu etiketleri kullanarak farklı medya sorguları oluşturabiliyoruz.

<picture> etiketi tanımlayıp, her ekran boyutuna göre farklı <source> etiketleri tanımlaması yapıyoruz.

Tarayıcının tanımaması durumuna bağlı olarak da <img> etiketi tanımlamasını sona ekleyerek farklı ekran çözünürlüklerinde farklı boyutlarda resimler gösterme fırsatımız ortaya çıkıyor.

 

 

Yukarıda gördüğünüz ekran görüntüsünde tarayıcı boyutu değiştirildiğinde sayfadaki resim boyutunun uygun bir şekilde ayarlanması sağlanmaktadır. Bu işlem için aşağıdaki kodları yazmanız yeterli olacaktır.

Uyarı : Örnekte kullanılan yildirim-800w.png, yildirim-480w.png ve yildirim-320w.png resim dosyalarının isimleridir. Örneği yaparken siz de kendi resim dosyalarınızın adını  kullanmayı unutmayın.

 

Yorum bırak