Ekran Çözünürlüğüne Göre Resim

HTML5 sürümüne yeni gelen bir özellik ile sadece HTML kodları ile ekran boyutuna göre resim kaynağı değiştirebilir haldedir. Detaylar için yazımı inceleyebilirsiniz.

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> etiketinin kendisi hiçbir şey göstermez, yalnızca farklı cihazlar veya ekran boyutları için farklı resimler görüntülemenizi sağlar ve birden çok görüntü kaynağı için bağlam işlevi görür.

<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 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
HTML ile Kayan Yazı Oluşturma
Devamını Oku

Kayan Yazı Oluşturma

Css veya Javascript kullanmadan sadece Html ile kayan yazı oluşturabiliyoruz. Çok creative, modern bir görünümü olmasa da içerik türüne göre bir çok sitede karşımıza çıkmasını sağlayan marquee özelliğini detaylı öğrenmek için yazımı inceleyebilirsiniz

Devamını Oku

HTML – Lazy Load (Tembel Yükleme)
Devamını Oku

Lazy Load (Tembel Yükleme)

Oldukça popüler olan Lazy Load özelliğini Html ile birlikte sayfa yüklendikten sonra resimlerin yüklenmesinin nasıl yapıldığından bahsettim. Bu işlemin Html ile nasıl yapıldığını merak ediyorsanız yazımı okuyabilirsiniz.

Devamını Oku