CSS Kullanarak Resimleri Boyutlandırma İşlemi?

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 şekilde en çok fazla tercih etmeniz gereken CSS’dir. Bu yüzden Ötürü da bu konuyu sizlere anlatma gereği duydum ki zorluk çekmeyesiniz. Web sitenizde kullandığınız resimlerin boyutu ne olursa olsun, bunu yalnızca divin genişlik ve yüksekliğine göre ayarlamak ister misiniz?     Şu kodu kullanarak sitedeki bütün div’lerinize otomatik şekilde 5 px’lik ovallık vermiş oluruz. Köşeleri yuvarlatmış oluruz.   1 div { 2 border-radius:5px üç } Tüm resimlerin div boyutuna göre şekillenmesini istiyorsak şunu yapmanız yeterli:   1 img{ 2 height: 100%; üç width: 100%; 4 } Bu kullandığınızda varsayalım resminizin kıymeti width:30 px değerinde olsun. Height (yükselik) kıymeti 80px boyutunda da bir div’iniz var. Bunun içine resmi koyduğunuzda resim otomatik şekilde bu boyutları alır.   Width: 130px ve height: 180px boyutunda bir diviniz mevcut diyelim. Bunun içine resmi koyduğunuzda yukarıdaki kullanımla resim otomatik şekilde bu boyutları alır.   Bunun beraberinde bir de resminize çerçeve isterseniz bunu da otomatik bütün resimli div’lerde isterseniz yapacağınız işlem şu olur:   1 img{ 2 height: 100%; üç width: 100%; 4 border: 2px solid #CCCCCC; 5 background-color: #FFFFFF; altı 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 şekilde renk verdik ve ben beyaz verdim. Siz dilediğiniz rengi verebilirsiniz.


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar