Merhabalar,
HTML5 sürümüne yeni gelen bir özellik ile sadece HTML kodları ile ekran boyutuna göre resim kaynağı değiştirebilir hale getirilmiştir. CSS kullanmadan veya Jquery, Bootstrap gibi kütüphanelere danışmadan sade HTML ile bu işlemi yapmak projenize göre gerçekten kolaylık sağlayabilir.
İyi de nasıl oluyor bu dediğinizi duyar gibiyim. Hemen bir örnek ile açıklayalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Ekran Çözünürlüğüne Göre Resim</title>
</head>
<body>
<picture>
<source media="(max-width: 360px)"
srcset="mobil.jpg">
<source media="(min-width: 750px)"
srcset="genis.jpg">
<img src="varsayilan.jpg" alt="Varsayılan Görsel">
</picture>
</body>
</html><picture> elemanı bir veya birden fazla etiketi içerebilir. Her source etiketi srcset değerine sahip olmalıdır. Bu değer source etiketinin diğer bir değeri olan media koşulunu sağladığında çalışacaktır. media ise CSS üzerinden de aşina olduğumuz ekran genişliğine göre verilen değere uygun olduğunda srcset niteliğini çalıştıracaktır.
Bu özelliği desteklemeyen tarayıcılar için picture etiketi içerisinde en alta varsayılan resmimizi img etiketine tanımlamayı unutmayalım.
Yukarıdaki kodu özetlersek;
- Belirtildiği gibi işlemimizi picture etiketi içerisinde gerçekleştiriyoruz.
- İlk source etiketi 360px genişliğin altında mobil.jpg isimli dosyayı ekrana yansıtacaktır.
- İkinci source etiketi ekran genişliği 720px üzeri ekranlarda ekrana genis.jpg isimli dosyayı yansıtacaktır.
- Son olarakta varsayılan görselimizi her zaman olduğu gibi img etiketine yazıp diğer özellikler desteklenmiyor veya koşullar sağlanmıyorsa ekrana varsayilan.jpg dosyasını yansıtmasını sağlıyoruz.
Bu özelliğin bir yerlerde işimize yarayacağını ve kullanış olarak çok kolaylık sağlayacağını düşünüyorum.
Mutlu kodlamalar 🙂
