Duyarlı Web Tasarımı - Görseller
Görüntünün sayfaya sığacak şekilde nasıl ölçeklendiğini görmek için tarayıcı penceresini yeniden boyutlandırın.
Genişlik Özelliğini Kullanma
widthÖzellik bir yüzdeye ayarlanmışsa ve özellik height"otomatik" olarak ayarlanmışsa, görüntü duyarlı olacak ve yukarı ve aşağı ölçeklenecektir:
Örnek
img {
width: 100%;
height: auto;
}
Yukarıdaki örnekte görüntünün orijinal boyutundan daha büyük olacak şekilde ölçeklendirilebileceğine dikkat edin. Çoğu durumda
max-widthbunun yerine özelliği kullanmak daha iyi bir çözüm olacaktır.
max-width Özelliğini Kullanma
Özellik %100'e ayarlanırsa , max-widthgerektiğinde görüntü küçülür, ancak asla orijinal boyutundan daha büyük olmayacak şekilde ölçeklenir:
Örnek
img {
max-width: 100%;
height: auto;
}
Örnek Web Sayfasına Resim Ekleyin
Örnek
img {
width: 100%;
height: auto;
}
Arka Plan Resimleri
Arka plan görüntüleri de yeniden boyutlandırma ve ölçeklendirmeye yanıt verebilir.
Burada üç farklı yöntem göstereceğiz:
1. background-sizeÖzellik "içerir" olarak ayarlanırsa, arka plan görüntüsü ölçeklenir ve içerik alanına sığdırılmaya çalışılır. Ancak, görüntü en boy oranını koruyacaktır (görüntünün genişliği ve yüksekliği arasındaki orantısal ilişki):
İş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;
}
2. background-sizeÖzellik "%100 %100" olarak ayarlanırsa, arka plan resmi tüm içerik alanını kapsayacak şekilde uzar:
İşte CSS kodu:
Örnek
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. background-sizeÖzellik "kapak" olarak ayarlanmışsa, arka plan resmi tüm içerik alanını kapsayacak şekilde ölçeklenir. "Kapak" değerinin en boy oranını koruduğuna ve arka plan görüntüsünün bir kısmının kırpılabileceğine dikkat edin:
İşte CSS kodu:
Örnek
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Farklı Cihazlar İçin Farklı Görüntüler
Büyük bir görüntü, büyük bir bilgisayar ekranında mükemmel olabilir, ancak küçük bir cihazda işe yaramaz. Yine de küçültmek zorundayken neden büyük bir resim yükleyesiniz? Yükü azaltmak için veya başka herhangi bir nedenle, farklı cihazlarda farklı görüntüleri görüntülemek için medya sorgularını kullanabilirsiniz.
Farklı cihazlarda görüntülenecek bir büyük resim ve bir küçük resim:
Ö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');
}
}
Tarayıcı genişliği yerine cihaz genişliğini kontrol eden min-device-widthyerine
medya sorgusunu kullanabilirsiniz . min-widthArdından, tarayıcı penceresini yeniden boyutlandırdığınızda görüntü değişmeyecektir:
Ö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');
}
}
HTML <resim> Öğesi
HTML <picture>öğesi, web geliştiricilerine görüntü kaynaklarını belirlemede daha fazla esneklik sağlar.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.