HTML 5.1 ile birlikte mobil cihazlar ve daha düşük hızlı internet bağlantıları için farklı imajlar gösterebilme imkanı getirildi. Gerek faktör üzerinden gerekse genişliği bizzat belirterek imaj etiketinin responsive davranmasını sağlayabilmektesiniz kullanımı ise şöyle;


<img src="images/dusuk-res.jpg" srcset="
images/dusuk-res.jpg 1x,
images/orta-res.jpg 2x,
images/yuksek-res.jpg 3x"
>

// dilerseniz x faktörü üzerinden değil genişlik üzerinden de imajı set edebiliyorsunuz

<img src="images/dusuk-res.jpg" srcset="
images/dusuk-res.jpg 500w,
images/orta-res.jpg 1000w,
images/yuksek-res.jpg 1600w"
>

//yukardaki koda sizes özelliği de ekleyerek ilgili imajın kapladığı büyüklüğe genişliğinin nasıl olması gerektiğini de ayarlayabilirsiniz. Burada resim 20em'den büyükse %100, küçükse ise viewportun %70'i büyüklüğünde olmasını sağlıyoruz.

<img src="images/dusuk-res.jpg" sizes="(max-width: 20em) 70vw, 100vw" srcset="
images/dusuk-res.jpg 500w,
images/orta-res.jpg 1000w,
images/yuksek-res.jpg 1600w"
>
// yine en son olarak resimlerini picture ve source tagleri arasına alarak hangi çözünürlükte hangi imajların gösterilmesi gerektiğini ayarlayabilmektesiniz.

<picture>
<source media="(max-width: 20em)" srcset="
images/kucuk/dusuk-res.jpg 1x,
images/kucuk/orta-res.jpg 2x,
images/kucuk/yuksek-res.jpg 3x
">
<source media="(max-width: 40em)" srcset="
images/orta/dusuk-res.jpg 1x,
images/orta/orta-res.jpg 2x,
images/orta/yuksek-res.jpg 3x
">

<img src="clicks/default/medium-res.jpg">
</picture>

Yorumlar

Bu kod parçacığına henüz yorum yapılmamış.

Yorum Yaz

Yorum yazabilmek için üye olunuz veya giriş yapınız