Css ile Resimleri Orantılı Boyutlandırma
7823 görüntüleme

Merhaba Arkadaşlar,

artık biliyorsunuz ki siteler responsive özelliğine sahip yapılmak zorunda, mobil uyumluluk göz ardı edilemeyecek bir durum.

tasarladığınız siteleri responsive yaptığınız zaman sayfa içindeki resimlerin küçülmesinde şöyle bir sorun oluşmaktadır. Kullandığınız resimlerin boyutları.

Normalde bir sayfa içine resim koyduğunuz da resime yükseklik ve genişlik verirsiniz, fakat sitenizin çözünürlüğü küçüldüğünde resminler büyük kalmaktadır. bunun için css de şöyle bir kod yazmanız gerekiyor.

 img {

  max-width: 100%;
  height: auto;
  
}

sayfa içindeki tüm resimlerin max genişliğini yüzde 100 olarak ayarlardık ve yükseklikte buna bağlı olarak değişecektir.

sayfa içinde bir class alanında bulunan resimlere sadece işletmek istiyorsanız.

örneğin .icsayfa adında bir alan içinde olan kısımda ki resimlere etki etsin

    .anaic img {
    
  display: block;
  max-width: 100%;
  height: auto;
  
}

 

sayfa içinde ki resimlere harici bir yükseklik vermişseniz bizim height:auto nun işlemesi için important  kullanmanız yeterli olacaktır.

.anaic img {

 display: block;
 max-width: 100%;
 height: auto!important;
 
}

daha sonra görüşmek dileğiyle


Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz.
biz bunları yapıyoruz ya siz...
© 2016 Bildiklerimiz.Net Tüm hakları saklıdır.