genişlik özellik kullanma
Eğer width özelliği% 100'e ayarlanır, görüntü duyarlı olmasını ve yukarı ve aşağı ölçeklenir:
Yukarıdaki örnekte, görüntü, orijinal boyutundan daha büyük olması imkanı ölçeklendirilebilir dikkat edin. Daha iyi bir çözüm, birçok durumda, kullanmak olacaktır max-width yerine özelliğini.
maksimum genişlik özelliğini kullanarak
Eğer max-width özelliği% 100'e ayarlanır, görüntü o kadar varsa küçültün, ancak orijinal boyutundan daha büyük olacak şekilde büyütmek asla:
Örnek Web Sayfasına Resim Ekleme
Arkaplan Görüntüleri
Arka plan görüntüleri de yeniden boyutlandırma ve ölçekleme yanıt verebilir.
Burada üç farklı yöntem gösterecektir:
Eğer 1. background-size özelliği ayarlandığında "contain" , arka plan görüntüsü ölçek olacak ve içerik alana sığacak şekilde deneyin. Ancak, görüntü en-boy oranını (görüntünün genişlik ve yüksekliği arasındaki orantılı bir ilişki) tutacak:
İşte CSS kodu:
Örnek
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
} Kendin dene " Eğer 2. background-size özelliği ayarlandığında "100% 100%" , arka plan görüntüsü, tüm içerik bölgesini kapsayacak şekilde uzatmak olacaktır:
İşte CSS kodu:
Örnek
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Kendin dene " Eğer 3. background-size özelliği ayarlandığında "cover" , arka plan görüntüsü, tüm içerik bölgesini kapsayacak şekilde dönüşebilecek. Dikkat edin "cover" değeri en boy oranını tutar ve arka plan görüntüsü bir bölümü kırpılmış edilebilir:
İşte CSS kodu:
Örnek
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Kendin dene " Farklı Cihazlar için farklı Görüntüler
Büyük görüntü küçük bir cihaz üzerinde büyük bilgisayar ekranında mükemmel, ama işe yaramaz olabilir. yine de küçültün varken neden büyük bir resim yüklemek? yükü azaltmak için, ya da herhangi bir başka nedenlerden dolayı, farklı cihazlarda farklı görüntüleri göstermek için medya sorgularını kullanabilirsiniz.
İşte farklı cihazlarda gösterilecektir bir büyük resmi ve diğeri daha küçük resimdir:
Örnek
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Kendin dene " Ortam sorgu kullanabilirsiniz min-device-width yerine, min-width yerine, tarayıcı genişliğinin, aygıt genişliğini kontrol eder. Tarayıcı penceresini yeniden boyutlandırmak Sonra görüntü değişmez:
Örnek
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Kendin dene " HTML5 <picture> Eleman
HTML5 tanıtıldı <picture> Birden fazla görüntüyü tanımlamak sağlar elemanı.
Tarayıcı Desteği
| Eleman | |||||
|---|---|---|---|---|---|
| <picture> | Desteklenmiyor | 38.0 | 38.0 | Desteklenmiyor | 25,0 |
<picture> eleman benzer şekilde çalışır <video> ve <audio> elemanlar. Farklı kaynaklardan kurmak ve tercihlerine uyan ilk kaynak kullanılıyor biridir:
Örnek
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Kendin dene " srcset özelliği gereklidir ve resmin kaynağını tayin eder.
media nitelik isteğe bağlıdır ve bulmak medya sorguları kabul CSS @media kuralı .
Ayrıca, bir tanımlamalıdır <img> desteklemeyen tarayıcılar için eleman <picture> öğesi.