Mobil Uyumlu Resim Nasıl Yapılır?

Responsive Site Tasarımı Elemanı - Responsive Görsel Oluşturmak

Responsive site tasarımı yaparken en zor kısmın görsel alanlar olduğu düşünülür.Siteye eklenen resim boyutlarının farklı olması işleri biraz karmaşıklaştırmaktadır.Fakat gerçekten mobil uyumlu resim oluşturmak zor mu?

Aslında sanıldığının aksine görsel öğeleri mobil uyumlu yani responsive yapmak sadece bir kaç kod eklemekle çözülebilen bir süreçtir.Bundan bir kaç yıl öncesine kadar başlı başına zor olan responsive site tasarımı artık herkesin yapabileceği bir konuma ulaştı.

Peki sitemiz için mobil uyumlu görsel nasıl yapılır? Bir kaç yöntemden bahsedeceğim.

1 – Yüzde yüz genişlik vermek.

HTML kısmında img etiketi ile bir resim ekleyin ve bu img etiketine bir class oluşturun.Benim oluşturduğum class “responsive” adında olacak.

 

<img src="resim.png" class="responsive" />

Daha sonra CSS kısmımıza gelerek “.responsive” classımıza değer veriyoruz.Vereceğimiz bu değer görsel genişliğini 100% yapmaktadır.Böylece görselimiz ekranın boyutuna göre şekillenecek ve verilen alanı yüzde yüz kapsayacaktır.Yükseklik olarak da auto değerini veriyoruz, bu şekilde genişlik daraldığında ya da genişlediğinde resim yüksekliği de otomatik olarak yeniden boyutlanacak.

.responsive {
width: 100%;
height: auto;
}

Uyarı: Bu yöntemin şöyle bir negaif yanı var.Eğer görseliniz yeteri kadar büyük değilse, büyük ekranlarda görselin kalitesi düşecektir.Mesela yüklediğiniz görselin genişliği 400px ve resimin olduğu div 800px ise, verdiğimiz yüzde yüz değerinden dolayı resim 800px olarak genişleyecek ve görüntü kalitesi düşecektir.

2 – Maksimum genişlik vermek

Yukardaki yöntemde meydana gelen sorunu önlemek için width yerine max-width değeri yani resim için maksimum bir genişlik değeri tanımlayabiliriz.Böylece fotoğrafı orjinal boyutundan daha küçük boyutlara getirebilirken daha geniş boyutlara getirilmeyecektir.

.responsive {
max-width: 100%;
height: auto;
}

3 – İki Yöntemi beraber kullanmak

Bu seçenek diğer iki yöntemi beraber kullanmayı amaçlar ve en iyi seçimde bu yöntemdir.
Böylece görselin genişiliği yüzde yüz yapılarak genişleyip, darabilecek ayrıca daha geniş boyutlar için belirli bir limit getirilerek, kalitesinin düşmesi engellenecektir.

.responsive {
width: 100%;
max-width: 400px;
height: auto;
}

Responsive site tasarımının en önemli konuların bir olan mobil uyumlu resim, gördüğünüz gibi oldukça basit bir işlemden ibarettir.Sadece 2 farklı CSS özelliği kullanarak görsellerinizi responsive yapabilirsiniz.

Kendi kodlarınızı yukarıda öğrendiğiniz şekilde değiştirdikten sonra responsive site tasarım testi yaparak sonuçlarını daha iyi analiz edebilirsiniz.

“Nasıl Yapılır” kategorisi ile başta HTML, CSS ve Javascript olmak üzere web tasarım konusunda aklınıza takılan sorunlara örneklerle çözüm bulmaya çalışacağım. Sonraki yazıda görüşmek üzere hoşçakalın.