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 2 3 | <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 5 6 | .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 5 6 | .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 6 7 | .esnek { width: 100%; max-width: 400px; height: auto; } |
Yorum Yap