img Etiketi

img etiketi bir resim oluşturur. Resmin yolu src özniteliğinde belirtilir. Kapanış etiketi gerektirmez.

Öznitelikler

Öznitelik	Açıklama
src	Resmin yolunu belirtir. Zorunlu öznitelik.
alt	Resim bulunamadığında (örneğin, yolu yanlış belirtildiğinde) resim yerine gösterilecek alternatif metin. Zorunlu öznitelik. Bulunmaması durumunda validatör (HTML veya CSS'in doğruluğunu kontrol eden program) uyarı verecektir.
width	Resmin genişliği, piksel cinsinden (bu durumda ölçü birimi belirtilmez) veya resmin ebeveynine göre yüzde olarak.
height	Resmin yüksekliği, piksel cinsinden (bu durumda ölçü birimi belirtilmez) veya resmin ebeveynine göre yüzde olarak.

Nüanslar

Bir resim için ne genişlik ne de yükseklik belirtilmemişse - resim kendi gerçek boyutuna sahip olur. Yükseklik belirtilmişse - resim belirtilen yüksekliğe ulaşır ve genişliği, orantıları bozulmayacak şekilde ayarlanır.

Sadece genişlik belirtilmişse - benzer şekilde, resim orantıları korumak için yüksekliği buna göre ayarlanır.

Hem genişlik hem de yükseklik belirtilmişse - resmin orantıları bozulabilir (veya bozulmayabilir, tahmin ettiğiniz gibi). Genişlik veya yükseklik (veya her ikisi birlikte) gerçek boyuttan büyükse - resim büyür, ancak kalite kaybı yaşar.

Resimlere genişlik ve yüksekliği özniteliklerle belirtmek (CSS üzerinden değil) tavsiye edilir - bu durumda tarayıcı resimleri daha hızlı yükleyecektir - her bir resmin boyutunu aldıktan sonra hesaplamasına gerek kalmaz.

Gereksiz yere resmin gerçek boyutlarını küçültmek tavsiye edilmez. Örneğin, resmin gerçek boyutu 1000 x 1000 piksel olsun, siz de genişliğini 100px olarak belirttiğinizi varsayalım. Bu durumda resim ekranda 100 piksel görünecek, ancak bin pikselin tamamının boyutuna sahip olacak ve dolayısıyla çok daha uzun sürede yüklenecektir.

Örnek

Hadi web sitesine bir resim ekleyelim ve height ve width özniteliklerini belirtmeyelim. Resim kendi gerçek boyutuna sahip olacak:

:

Örnek

Hadi resme width özniteliği ile genişlik eklemeyi deneyelim, bu durumda yükseklik resmin oranlarını koruyacak şekilde ayarlanmalıdır:

:

Örnek

Şimdi de resme height özniteliği ile yükseklik ekleyelim, bu durumda genişlik resmin oranlarını koruyacak şekilde ayarlanmalıdır:

:

Örnek

Hadi resme aynı anda hem yükseklik hem de genişlik ekleyelim. Bu durumda resmin oranları bozulmalıdır (mutlaka değil, ancak bu durumda yükseklik ve genişlik oranların bozulması için ayarlanmıştır):

:

Örnek

Hadi resme yanlış bir yol belirtelim (basitlik için boş bırakalım). Resim yerine alt özniteliğinin içeriğini göreceğiz (sıradan bir metin gibi görünüyor - ancak kopyalamayı deneyin - başaramayacaksınız, bir resim gibi sürüklenecektir):

:

Ayrıca Bakınız