Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Asp.Net PHP & MySQL .Net MVC C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Css ile Resimleri Orantılı Boyutlandırma

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

Sosyal Hesabında Paylaş

9330 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2016 Bildiklerimiz.Net Tüm hakları saklıdır.
bir Bildiklerimiz projesidir.