Responsive Images - Ekrana Göre Genişleyen veya Daralan Resimler


Twitter'da Paylaş Favorilerime Ekle

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; 

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.

YORUMLAR



CSS Dersine Ait Diğer Konular: