HTML

HTML5 ile picture Etiketi ile Responsive Image Oluşturma

Bu örnekte HTML5 ile gelen yeniliklerden olan <picture> ve <source> etiketi kullanımını ve bu etiketleri kullanarak tarayıcı boyutu değiştiğinde veya fiziksel cihaza bağlı olarak (tablet, cep telefonu, bilgisayar) resimlerimizin sayfada responsive (duyarlı) olarak görüntülenmesini sağlayacağız.

HTML Kodları:

Sizde uygun resim dosya isimlendirmesi yaparak yukarıdaki resimde görüldüğü gibi tarayıcı genişliği ile oynayıp istediğiniz resmin tarayıcıya gelmesini basit bir şekilde sağlayabilirsiniz.

Yorum yap

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d blogcu bunu beğendi: