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.

css responsive resim

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;
    }

css responsive image

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:

css responsive resim

Örnek Web Sayfasına Resim Ekleme



img {
     max-width: 100%;

     height: auto;
    }

önizleme buton

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 responsive resim css responsive resim

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…

yusuf aslan 12/01/2021

Teşekkür ederim yardımcı olduğunuz için Reklamlara tıklayıp yardımcı oldum ☺

faruk yetkin 25/01/2021

Emeğinize sağlık. Tasarım konusunda emekleme aşamasını sayenizde aşıp yürümeye geçiyorum. Yanlız srcset konusunu tam anlamadım. Konuyu açarmısın?

yönetici 27/01/2021

Faruk media etiketlerine göre davranır. Bu şartları bulamazsa hiç media etiketi belirtmediğimiz resmi gösterir.

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

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

7836

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.