CSS ile Resim Ekleme: Kapsamlı Bir Kılavuz
CSS (Basamaklı Stil Sayfaları), web sayfalarının görünümünü ve düzenini kontrol etmek için kullanılan güçlü bir stil dilidir. Resim eklemek, CSS’nin en temel ve yaygın kullanımlarından biridir. Bu kapsamlı kılavuzda, CSS kullanarak web sayfalarınıza resim eklemenin tüm yönlerini inceleyeceğiz.
Resim Ekleme Temelleri
Bir web sayfasına resim eklemek için img etiketini kullanırız. img etiketi, resmin kaynağını belirten src özniteliğine sahip olmalıdır. Örneğin:
html
<img src="resim.jpg" alt="Resim açıklaması">
Yukarıdaki kod, “resim.jpg” adlı bir resim dosyası ekleyecek ve resmin alternatif metni olarak “Resim açıklaması” metnini kullanacaktır. Alternatif metin, resim görüntülenemiyorsa veya ekran okuyucular tarafından okunuyorsa görüntülenir.
Resim Boyutlarını Kontrol Etme
Resimlerin boyutlarını kontrol etmek için CSS’de width ve height özelliklerini kullanabiliriz. Bu özellikler, resmin piksel cinsinden genişliğini ve yüksekliğini belirler. Örneğin:
css
img {
width: 200px;
height: 150px;
}
Yukarıdaki CSS kodu, tüm resimlerin 200 piksel genişliğinde ve 150 piksel yüksekliğinde görüntülenmesini sağlayacaktır.
Resimleri Konumlandırma
Resimleri web sayfasında konumlandırmak için CSS’de position ve float özelliklerini kullanabiliriz. position özelliği, resmin konumlandırma türünü belirlerken, float özelliği resmin metnin soluna veya sağına hizalanmasını sağlar.
Konumlandırma Türleri:
static: Resim, normal akışta konumlandırılır.relative: Resim, normal akışta konumlandırılır, ancaktop,bottom,leftverightözellikleriyle konumu değiştirilebilir.absolute: Resim, normal akıştan çıkarılır vetop,bottom,leftverightözellikleriyle konumu kesin olarak belirlenir.fixed: Resim, ekranın belirli bir konumunda sabitlenir ve kaydırma sırasında hareket etmez.
Yüzdürme:
float: left: Resim metnin soluna hizalanır.float: right: Resim metnin sağına hizalanır.
Resimleri Biçimlendirme
Resimleri biçimlendirmek için CSS’de border, margin ve padding özelliklerini kullanabiliriz. Bu özellikler, resmin etrafına kenarlık, boşluk ve dolgu eklememizi sağlar.
Kenarlık:
border-width: Kenarlığın genişliğini belirler.border-style: Kenarlığın stilini belirler (örneğin, solid, dashed, dotted).border-color: Kenarlığın rengini belirler.
Boşluk:
margin: Resmin etrafındaki boşluğu belirler.margin-top,margin-bottom,margin-leftvemargin-right: Resmin belirli kenarlarındaki boşluğu belirler.
Dolgu:
padding: Resmin içindeki dolguyu belirler.padding-top,padding-bottom,padding-leftvepadding-right: Resmin belirli kenarlarındaki dolguyu belirler.
Örnekler
Resmi 200 piksel genişliğinde ve 150 piksel yüksekliğinde görüntüleme:
css
img {
width: 200px;
height: 150px;
}
Resmi web sayfasının ortasına konumlandırma:
css
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Resmin etrafına 10 piksel genişliğinde kırmızı bir kenarlık ekleme:
css
img {
border: 10px solid red;
}