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ı:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Test Picture Element</title> </head> <body> <picture> <source media="(min-width: 1024px)" srcset="Images/default.png" /> <source media="(min-width: 650px)" srcset="Images/green.png" /> <source media="(min-width: 450px)" srcset="Images/blue.png" /> <source media="(min-width: 350px)" srcset="Images/red.png" /> <img src="Images/fallback.png" alt="Logo" style="height:90px;width:1024px" /> </picture> </body> </html> |
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.