Reaktif Web Sayfası Tasarımı - Görsel

width özelliğini kullanarak

Eğer width özelliği yüzdelik olarak ayarlamak ve yüksekliği "auto" olarak ayarlamak, görselin genişlemek veya küçülme yapmasını sağlar:

Örnek

img {
  width: 100%;
  height: auto;
}

Kendi kendine deneyin

Lütfen dikkat edin, yukarıdaki örnekte, görsel orijinal boyutundan büyük çıkmakta olabilir. Çoğu durumda, daha iyi bir çözüm olarak max-width Özellik.

max-width özelliğini kullanarak

Eğer max-width özelliği %100 olarak ayarlanmışsa, görsel ihtiyaç duyduğunda küçültecek, ancak asla orijinal boyutundan büyük çıkmayacaktır:

Örnek

img {
  max-width: 100%;
  height: auto;
}

Kendi kendine deneyin

Örnek web sayfasına görsel ekleyin

Örnek

img {
  width: 100%;
  height: auto;
}

Kendi kendine deneyin

Arka plan görseli

Arka plan görseli de boyutlandırma ve ölçeklendirmeye yanıt verebilir.

Bu, bizim gösterdiğimiz üç farklı yöntemdir:

1. Eğer background-size Özellik "contain" olarak ayarlanmışsa, arka plan görseli ölçeklenecek ve içerik alanına uyum sağlamaya çalışacaktır. Ancak, görsel kendi en-boy oranına (görsel genişliği ile yükseklik arasındaki oran) sahiptir:

Bu, CSS kodudur:

Örnek

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Kendi kendine deneyin

2. Eğer background-size eğer "100% 100%" değeri ayarlanırsa, arka plan görseli içeriği kapsayan şekilde çekilir:

Bu, CSS kodudur:

Örnek

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Kendi kendine deneyin

3. Eğer background-size Eğer "cover" değeri ayarlanırsa, arka plan görseli içeriği kapsayan şekilde ölçeklendirilir. "Cover" değeri genişlik-yükseklik oranı korur ve arka plan görselinin bir kısmını kesebilir:

Bu, CSS kodudur:

Örnek

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Kendi kendine deneyin

Farklı cihazlar için farklı görseller hazırlayın

Büyük görsel büyük bilgisayar ekranlarında mükemmel görünüyor, ancak küçük cihazlarda kullanışsız. Görseli küçültmek zorunda kaldığınızda neden büyük görseli yüklüyorsunuz? Yüksekliği azaltmak veya herhangi bir diğer neden için, medya sorgularını kullanarak farklı cihazlarda farklı görseller görüntüleyebilirsiniz.

Bu, büyük bir görsel ve küçük bir görseldir ve farklı cihazlarda görüntülenir:

Örnek

/* 400 pikselden küçük genişlik için: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 piksel veya daha büyük genişlik için: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Kendi kendine deneyin

medya sorgularını kullanabilirsiniz min-device-width değil min-width cihaz genişliğini kontrol etmek yerine tarayıcı genişliğini kullanın. Sonra, tarayıcı penceresini büyütürken, görsel değişmez:

Örnek

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

Kendi kendine deneyin

HTML5 <picture> elementi

HTML5 <picture> elementi, bu elementle çok sayıda resim tanımlayabilirsiniz.

tarayıcı desteği

38.0 13 38.0 9.1 25.0

<picture> elementinin etkisi benzerdir <video> ve <audio> Element. Farklı kaynaklar ayarladık ve öncelikli olarak kullanılan kaynak:

Örnek

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Kendi kendine deneyin

srcset Özelliği zorunludur ve görselin kaynağını tanımlar.

Özelliği seçmeli, media Özellik seçmeli, media CSS @media Kuralları Bulunan medya sorgularını

İpucu:Desteğini sağlamayan <picture> Elemanın Tarayıcı Tanımı <img> Elementler.