Responsive Web Tasarım Resimler

Duyarlı web tasarımı, mobil cihazlarda, tabletlerde ve masaüstü ekranlarında çalışan web siteleri oluşturmak için kullanılan bir tekniktir.

Duyarlı web tasarımı Göze hoş gelen bir web sitesi yapmamızı sağlar.

Resmin hangi sayfa boyutuna sığacağını görmek için tarayıcı penceresini yeniden boyutlandırın.

Genişlik özelliğini kullanma

Genişlik özelliği, width= %100 olarak ayarlanırsa, resim genişlik ve yükseklik aralıklara göre duyarlı işlevler uygular:

img {
     width: 100%;

     height: auto;
    }

Yukarıdaki örnekte, resmin orijinal görüntüsünden daha büyük olacağını unutmayın. Maksimum genişlik max-width özelliğini kullanarak bu sorunu çok iyi çözebiliriz.

Maksimum genişlik özelliğini kullanma

Maksimum genişlik özelliği max-width= %100 olarak ayarlanırsa, görüntü hiçbir zaman orijinal boyutundan daha büyük olmayacaktır:

img {
     max-width: 100%;

     height: auto;
    }

ÇIKTI:

Örnek Web Sayfasına Resim Ekleme

img {
     max-width: 100%;

     height: auto;
    }

Arka Plan Resimleri

Arka plan resmi yeniden boyutlandırmaya veya ölçeklemeye yanıt verebilir.

Burada üç farklı yöntem göstereceğiz:

1. background-size Özellik "contain" olarak ayarlanmışsa, arka plan resmi ölçeklenecek ve içerik alanına sığmaya çalışacaktır. Ancak, görüntü en boy oranını koruyacaktır (resmin genişliği ve yüksekliği arasındaki orantısal ilişki):

div {
     width: 100%;

     height: 400px;

     background-image: url('meyve.jpg');

     background-repeat: no-repeat;

     background-size: contain;

     border: 1px solid red;
    }

HTML:

    <div> </div>

ÇIKTI:

2. Arka plan boyutu özelliği "% 100% 100" olarak ayarlanmışsa, arkaplan resmi tüm alana yayılacaktır:

div {
      width: 100%;

      height: 400px;

      background-image: url('meyve.jpg');

      background-size: 100% 100%;

      border: 1px solid red;
    }

ÇIKTI:

3. Arka plan boyutu özelliği "cover" olarak ayarlanırsa, arka plan görüntüsü, arka plan görüntüsünün arka plan alanını tamamen kaplaması için yeterince geniş olacak şekilde genişletilir. Bu özelliğin, resmin ölçeğini koruduğunu ve arka plan resminin bir kısmı kırpılabilir:

div {
      width: 100%;

      height: 400px;

      background-image: url('meyve.jpg');

      background-size: cover;

      border: 1px solid red;
    }

ÇIKTI:

Farklı Cihazlar İçin Farklı Görüntüler

Büyük boyutlu görüntüler büyük ekranda gösterilebilir, ancak küçük bir ekranda iyi görüntülenmezler. Yükleme hızını etkileyen küçük bir ekranda büyük resimler yüklemek zorunda değiliz. Bu nedenle, cihaza bağlı olarak farklı görüntüleri görüntülemek için medya sorgularını kullanabiliriz. Aşağıdaki büyük ve küçük resimler farklı cihazlarda görünecektir:

CSS:

/* 400 pikselden daha küçük genişlik için: */
body {
    background-image: url('kiraz_ciceği.jpg'); 
}

/* Genişlik 400px ve daha büyük için: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('meyve.jpg'); 
    }
}

min-device-width özelliği yerine medya sorgusunun min-width genişliğini kullanabilir, bu da tarayıcı genişliği yerine cihaz genişliğini algılar. Tarayıcı boyutu sıfırlandığında, görüntü boyutu değişmez.

CSS:

/*  400 pikselden küçük cihazlar için: */
body {
    background-image: url('kiraz_ciceği.jpg'); 
}

/*  400px ve daha büyük cihazlar için: */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('meyve.jpg'); 
    }
}

HTML5 <picture> Etiketi

Tarayıcı Desteği

Element
<picture >	13	38.0	38.0	9.1	25.0

<picture>Elemanlar <video> ve <audio> benzer elemanlardır. Cihaz farklı kaynaklar olabilir, ilk kaynak kümesi tercih edilir:

<picture>
  <source srcset="meyve_small.jpg" media="(max-width: 400px)">
  <source srcset="meyve.jpg">
  <img src="img_meyve.jpg" alt="meyveler">
</picture>

srcset :resimlerin görüntü kaynağını tanımlar.

media Özellikler isteğe bağlıdır ve medya sorguları için CSS @ media kuralında görüntülenebilir.

Ayrıca resim etiketiyle (img), picture öğeyi desteklemeyen tarayıcılar için bir öğe tanımlamanız gerekir.

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…

<picture>
  <source media="(min-width: 800px)" srcset="manzara-800w.png">
  <source media="(min-width: 480px)" srcset="manzara-480w.png">
  <source media="(min-width: 320px)" srcset="manzara-320w.png">
  <img src="manzara.png" style="width:auto; alt="manzara"">
</picture>