Responsive görüntüler otomatik olarak ekran boyutuna uyacak şekilde ayarlanır.
Responsive etkiyi görmek için animasyonu inceleyin:
Responsive Resim Nasıl Yapılır
Resmi Responsive Yapma
Adım 1: HTML’yi oluşturun
|
1 |
<img src="responsive-resim.png" alt="duyarlı resimler" class="esnek"> |
Adım 2: Resmin duyarlı olması için hem aşağı hem de yukarı ölçeklenmesini gerekir, CSS width özelliğini% 100 ve height değerini auto olarak ayarlayın:
|
1 2 3 4 |
.esnek { width: 100%; height: auto; } |
max-width ayarlama
Görüntünün küçültülmesini istiyor, ancak orijinal boyutundan daha büyük olması istenmiyorsa, max-width: 100% olarak ayarlanmalıdır.
|
1 2 3 4 |
.esnek { max-width: 100%; height: auto; } |
max-width ayarlama
Resim için belirli bir büyüklük verebilirsiniz. Bu değere kadar büyütülüp altındaki değer için responsive yapılır.
|
1 2 3 4 5 |
.esnek { width: 100%; max-width: 400px; height: auto; } |
Add comment