Responsive Reklam Alanı

CSS Resim Boyutlandırma İşlemi emresupcin - CSS Kullanarak Resimleri Boyutlandırma İşlemi?Merhaba Arkadaşlar,

 

Bu yazımda sizlere CSS kullanarak resimleri nasıl boyutlandırabiliriz onu anlatacağım. Malum web sitesi tasarlanmasında style olarak en çok tercih etmeniz gereken CSS’dir. Bu sebepten dolayı da bu konuyu sizlere anlatma gereği duydum ki zorluk çekmeyesiniz. 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.

 

1  div {
2   border-radius:5px
3  }

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

 

1  img{
2   height: 100%;
3   width: 100%;
4  }

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:

 

1 img{
2	height: 100%;
3	width: 100%;
4	border: 2px solid #CCCCCC;
5	background-color: #FFFFFF;
6	padding: 1px;
7  }

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.

Paylaşmak Güzeldir
Yazar
Yazar
Sitenizde Sayfa Yönlendirmesi Yapımı? Pinterest Nedir? Ne İşe Yarar?
2 Yorum
  1. Yazar
    Aydın Erikan

    Sagolun Arkadaşlar Yardımcı Oldugunuz İçin Telşekkürler

  2. Yazar

    The abitily to think like that shows you’re an expert

Bir yorum yazın
Siz de düşüncenizi belirtebilirsiniz.

Emre Supçin * Ecceplus WordPress Themes