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.
- emresupcin
- Css
- 28 Haziran 2013 - 23:50
- 2 Yorum
- 2378 Görüntülenme
css css resim boyutlandırma resim boyutlandırma resim boyutlandırma css resim boyutlandırma işlemi resim boyutlandırma kodu resim nasıl boyutlandırılır
Sagolun Arkadaşlar Yardımcı Oldugunuz İçin Telşekkürler
The abitily to think like that shows you’re an expert