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.
1 2 3 4 5 6 7 8 | <picture> <source media="(min-width: 800px)" srcset="yildirim-800w.png"> <source media="(min-width: 480px)" srcset="yildirim-480w.png"> <source media="(min-width: 320px)" srcset="yildirim-320w.png"> <img src="yildirim-800w.png" alt="Flowers" style="width:auto;"> </picture> |
Yorum Yap