CSS ile Resimleri Boyutlandırmak

Web sitenizde kullandığınız resimlerin boyutu ne olursa olsun, bunu sadece divin genişlik ve yüksekliğine göre ayarlamak ister misiniz?

Web sitenizde kullandığınız resimlerin boyutu ne olursa olsun, bunu sadece divin genişlik ve yüksekliğine göre ayarlamak ister misiniz?

Şu kodu kullanarak sitedeki tüm div'lerinize otomatik olarak 5 px'lik ovallık vermiş oluruz. Köşeleri yuvarlatmış oluruz.


div {

   border-radius:5px

}



Tüm resimlerin div boyutuna göre şekillenmesini istiyorsak şunu yapmanız yeterli:


img{

   height: 100%;

   width: 100%;

}



Bu kullandığınızda varsayalım resminizin değeri width:30 px değerinde olsun. Height (yükselik) değeri 80px boyutunda da bir div'iniz var. Bunun içine resmi koyduğunuzda resim otomatik olarak bu boyutları alır.

Width: 130px ve height: 180px boyutunda bir diviniz var diyelim. Bunun içine resmi koyduğunuzda yukarıdaki kullanımla resim otomatik olarak bu boyutları alır.

Bunun yanında bir de resminize çerçeve isterseniz bunu da otomatik tüm resimli div'lerde isterseniz yapacağınız işlem şu olur:


img{

    height: 100%;

    width: 100%;

    border: 2px solid #CCCCCC;

    background-color: #FFFFFF;

    padding: 1px;

}



Burada resmin boyutu otomatik ayarlandı, div'in iç boşluğu 1 px ve dışına da 2 px'lik border verdik. İç boşlukta 1 px vermemizin sebebi içte 1 px'lik çerçeve çizgisi. Tabi ki div'e background olarak renk verdik ve ben beyaz verdim. Siz istediğiniz rengi verebilirsiniz.

Başarılar...
  • Etiketler;
Fatih keskin Fatih keskin
HERZAMAN BİR NEDEN VARDIR
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git