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.
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.
Responsive tasarım ile ilgili daha detaylı bilgi için RESPONSİVE WEB TASARIM NEDİR? yazımı okuyabilirsiniz.
3 satır Css kodu yazarak resimleri responsive hale getirebiliyoruz. Bunun için öncelikle bir img etiketi ile sayfamıza resim ekleyelim.
Html Kodları
|
1 2 3 |
<img src="" alt=""> |
img etiketinin src özniteliğine kullanacağınız resmin yolunu yazmalısınız.
Css Kodları
|
1 2 3 4 5 6 7 |
img { max-width: 100%; display: block; height: auto; } |
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.
 Yapma){kind=link}