Resimlerinizi veya Fotoğraflarınızı Responsive hale mi getirmek istiyorsunuz ?

Resimleri veya fotoğrafları responsive uyumlu hale getirmek için yazımızı okuyun.

İlk olarak dikkat etmemiz gereken detay; Resimlerin boyutlandırılması yapılırken, px cinsinden ölçü vermek yerine % değer üzerinden boyutlandırma yapacağız.

Aşağıda paylaştığım kodlarda dikkat edersiniz, fotoğrafın width ve height değerleri 100% üzerinden verilerek resim tam ekranda responsive olarak yerleştirilmiş.

Width ve height değerleri 100% olarak verilmiş bir fotoğrafı veya öğeleri, 500*500 px değerinde bir divin içine alırsanız, divin tamamını kapsar ve onun boyutlarına uyum sağlar.

Bir diğer göreceğimiz örnek ise, fotoğraf istediğimiz boyutta olacak ama ekrana göre de uyum sağlayacak. Burada ihtiyacımız olan css özellikleri, max-width ve max-height olacaktır. Adındanda anlaşılacağı üzere uzunluk ölçülerine maximum değer ekleyeceğiz ve verdiğimiz 100% ölçülere bir kısıtlama getireceğiz.

Aşağıdaki örnekte, max-height:600px; max-width:500px; vererek fotoğrafımıza maximum ölçü kısıtlaması getirdik ama kendi ölçü birimi 100% üzerinden verildiği için, ekran genişliği 500px’in altına düştüğü zaman, 100% değer devreye girerek ekrana uyumlu bir boyutlandırmaya sağlanacak.