Css ile Resimleri Responsive (Mobil Uyumlu) Yapma

Web tasarımlarında en çok kullandığımız öğelerden bir tanesi de resimlerdir. Bu yazımda kullanmış olduğumuz resimleri nasıl responsive hale getirebileceğimizi yani mobil uyumlu yapabileceğimizi göstereceğim.

Aşağıda responsive bir resim örneği paylaştım.

css-ile-resimleri-responsive-yapma

Gördüğünüz gibi tarayıcının genişliğini daralttıkça resim de en boy oranını koruyarak küçülüyor. 

Yani aynı resim hem bilgisayarda hem tablette hem de telefonda cihaz boyutu ile uyumlu hale gelmiş oluyor.

3 satır Css kodu yazarak resimleri responsive hale getirebiliyoruz. Bunun için öncelikle bir img etiketi ile sayfamıza resim ekleyelim.

Html Kodları

img etiketinin src özniteliğine kullanacağınız resmin yolunu yazmalısınız.

Css Kodları

Css kodlarımız da bu şekilde. Bazı kaynaklarda  max-width yerine width  özelliğinin kullanıldığını görebilirsiniz.

Aralarındaki fark şudur:

Örneğin resminizin genişliği 400px, bilgisayarınızın ekran genişliği de 1300px diyelim.

Eğer width: 100%; yazarsanız resminiz bilgisayar ekranında 1300px genişliğinde olacak. Bu da resminizin kalitesinin bozulmasına neden olacaktır.

Ama max-width: 100%; yazdığınızda resminiz bilgisayar ekranında da 400px genişliğinde kalacaktır.

Yani resminiz 400px den küçük ekranlarda en boy oranını koruyarak küçülecek ama 400px den geniş ekranlarda herhangi bir büyüme söz konusu olmayacaktır.

Css ile resimleri responsive hale bu şekilde getiriyoruz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

500+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.