Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm 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ş

13738 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...

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