Responsive Images
Resimlerimizin genişliklerini px cinsinden vermek yerine % cinsinden vererek, onları farklı ekranlara uyumlu hale getirebiliriz.
Genelde resimleri başka html elemanlarının içine yerleştiririz. Bir resmin içinde bulunduğu elemana oranla ne kadar yer kaplayacağını % cinsinden belirlersek, o elemanın genişliğine göre resmin genişliği de değişecektir.
img {
width: 100%;
height: auto; }
Yukarıdaki kodlar esnek resimler elde etmek için çok kullanılmaktadır. 100% değeri resmin içerisinde bulunduğu etiketin iç hacmi kadar yer kaplamasını sağlar. Bu değeri istediğimiz oranda belirleyebiliriz. Height: auto yapılarak da resmin yüksekliğinin, en boy oranı korunarak o anki genişliğine göre belirlenmesini sağlar.
Ancak width: 100% kullanmanın bir riski vardır. Resmin bulunduğu alan, resmin orjinal genişliğinden fazla ise resim büyümeye devam edecek ve bozulmalar olacaktır. Bu nedenle aşağıdaki gibi max-width özelliğini kullanmak daha avantajlı olacaktır.
img {
max-width: 100%;
height: auto; }
Eğer BootStrap kullanıyorsak img-responsive class'ını kullanarak bu işi kısa yoldan halledebiliriz. (Bootstrap derslerimizi incelemek isterseniz tıklayın.)
Responsive sayfa tasarımı hakkında daha fazla bilgi için diğer sayfalarımızı da inceleyebilirsiniz.
responsive images kullanma, resimleri responsive yapma, ekrana göre resimlerin daralması ve genişlemesini sağlama, resimlerin ekrana uyum sağlaması
KONU İLE İLGİLİ ÖRNEKLER
Bu konu ile ilgili örnek bulunmamaktadır.
20514 kez okundu.