CSS-Resim-Boyutlandırma-İşlemi_emresupcinMerhaba 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.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Sitenizde Sayfa Yönlendirmesi Yapımı?

Sonraki Yazı:Pinterest Nedir? Ne İşe Yarar?

YORUMLAR

Bu yazıya 2 yorum yapılmış.

  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

SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.