HTML <img> etiketinin height ve width özellikleri
Örnek
Görsel genişliğini ve yüksekliğini sırasıyla 200 piksel olarak ayarlayın:
<img src="/i/mouse.jpg" height="200" width="200" />
Tanım ve Kullanım
img etiketinin height ve width özellikleri, görselin boyutlarını ayarlar.
İpucu:Görsel için height ve width özelliklerini belirlemek iyi bir alışkanlıktır. Bu özellikler ayarlandığında, sayfa yüklenirken görsel için yer ayırmak mümkün olur. Bu özellikler belirtilmemişse, tarayıcı görselin boyutunu bilmez ve uygun alanı ayıramaz, bu nedenle görsel yüklenirken sayfa düzeni değişir. (Aşağıdaki bölümlerde bu görüşe daha fazla açıklama yapılır).
İpucu:height ve width özellikleri aracılığıyla görseli ölçeklemek doğru bir yaklaşım değildir. Görseli küçültmek için height ve width özellikleri kullanıldığında, kullanıcı büyük kapasiteli bir görseli indirmek zorunda kalır (görsel sayfada ne kadar küçük görünse de). Doğru yaklaşım, görseli web sayfasında kullanmadan önce yazılım ile uygun boyutta işaretlemektir.
Daha fazla okuma:height ve width özelliklerinin ayrıntılı açıklaması
Daha fazla örnek
Görsel boyutunu değiştirme - Doldurma görselleri
height ve width özelliklerinin gizli bir özelliği, gerçek boyutu belirtmemek gerektiği, yani bu iki değer gerçek boyuttan büyük veya küçük olabilir. Tarayıcı, bu ayırt etmeden görseli otomatik olarak ayarlayacaktır, bu da büyük görseller için küçük görseller oluşturmak ve küçük görselleri büyütmek için kolayca kullanılabilir. Ancak, dikkat edilmesi gereken bir nokta, tarayıcının yine de tam dosyayı indirmesi gerektiği ve orijinal genişlik ve yükseklik oranını korumazsa görselin bozulacağıdır.
height ve width özelliklerinin bir başka ipucu, sayfa alanını kolayca doldurmak ve belge performansını iyileştirmektir. Düşünün ki, belgede bir renkli dikey çubuk yerleştirmek istiyorsunuz. Tam boyutlu bir görsel oluşturmanız gerekmez, aksine, genişliği ve yüksekliği bir piksel olan bir görsel oluşturmanız yeterlidir ve bu görseli kullanmak istediğiniz rengi ona atayın. Daha sonra height ve width özelliklerini daha büyük bir boyuta genişletin.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Yukarıdaki bu HTML'nin etkisi budur, bu renkli çubuk tek bir piksel genişliğindeki bir görselden yapılmıştır:
Yüzdelik değer kullanımı
width özelliğinin sonuncu bir ipucu, pixelin mutlak değerini yüzdelik değerle değiştirmektir. Bu, tarayıcının resmi ekran penceresinin belirli bir oranına göre ölçeklendireceğini anlamına gelir. Bu nedenle, genişliği ekran genişliği ile aynı, yüksekliği 30 piksel olan bir renkli dikey çubuk oluşturmak istiyorsanız, şöyle yapabilirsiniz:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Belge penceresinin boyutu değiştiğinde, bu resmin boyutu da değişir:
İpucu:Eğer bir yüzdelik formdaki width değeri sağlanmış ve height göz ardı edilmişse, herhangi bir büyütme veya küçültme durumunda tarayıcı, resmin genişlik-yükseklik oranını koruyacaktır. Bu, resmin yüksekliği ile genişliği arasındaki oranın değişmeyeceği ve resmin bozulmayacağı anlamına gelir.
Aşağıdaki HTML'ye göz atın:
<img src="/i/ct_1px.gif" width="20%" />
Yani, sadece ct_1px.gif'nin width özelliklerinin yüzdesel değerini ayarladıysanız, bir dörtgen görüntü elde edersiniz (çünkü orijinal ct_1px.gif sadece 1px geniş ve yüksek olan bir dörtgen):
İpucu:Online test araçlarımızdaKişisel olarak deneyin!
İpucu:Yukarıdaki örnekleri, height ve width özelliklerinin kullanımını daha iyi anlamak için sağlıyoruz. Sadece büyük alanlı saf renk blokları ile sayfayı süslemek istiyorsanız, daha iyi bir yöntem:Arka plan rengi oluşturmak için CSS kullanma。
Tarayıcı Desteği
Tüm tarayıcılar height ve width özelliklerini destekler.
Sözdizimi
<img height="value" />
veya:
<img width="value" />
Özellik değeri
| Değer | Açıklama |
|---|---|
| pixels | Piksel olarak yükseklik veya genişlik değeri. |
| percent | İçeren elementin yüzdesi olarak yükseklik veya genişlik değeri. |
TIY Örneği
- Görüntü boyutunu ayarlama
- Bu örnek, resmi farklı boyutlara nasıl ayarlayacağınızı gösterir.
height ve width özelliklerinin ayrıntılı açıklaması
height ve width özelliklerini neden kullanmalıyız?
Belge yüklenirken içeriğin düzenli olmayan bir şekilde hareket ettiğini gördünüz mü? Bu nedeni, tarayıcı her bir yüklenen görüntüyü gösterebilmek için sayfa düzenini sürekli olarak ayarlamak zorundadır. Tarayıcı, görüntü genişliğini ve yüksekliğini indirmek ve çözümlemek suretiyle görüntü boyutunu belirler ve ardından gösterim penceresinde bir denk bir düzgen alan bırakır. Daha sonra tarayıcı, görüntüyü gösterim içine yerleştirmek için sayfa düzenini ayarlar. Bu, görüntülerin bağımsız dosyalar olduğunu ve kaynak dosyalarla birlikte bağımsız olarak yüklediklerini de bize söyler.
Ancak bu, belgeyi göstermenin en etkili yöntemi değildir, çünkü tarayıcı, yan yana ve sonraki belge içeriklerini göstermeden önce her bir görüntü dosyasını kontrol etmek ve ekran alanlarını hesaplamak zorundadır. Bu, belgenin gösterimine büyük gecikmelere neden olabilir ve kullanıcıların okumayı kesebilir.
Yaratıcılar için, <img> etiketinin height ve width özelliklerini kullanarak görüntü boyutlarını belirlemek daha etkili bir yöntemdir. Bu şekilde, tarayıcı görüntüyü indirmeden önce ona yer ayırır ve belgeyi daha hızlı gösterir, ayrıca belge içeriğinin hareketini önler. Bu iki özellik de tam sayısal değerlerdir ve görüntü boyutlarını piksel olarak belirtir. Bu iki özellik <img> etiketinde出现的次序并不重要.
height ve width özelliklerinin sorunu
Başka bir <img> etiketinin height ve width özellikleri performansı iyileştirebilir ve bazı küçük ipuçlarını uygulamanıza olanak tanır, ancak bunları kullanırken bazı zorlayıcı olumsuz etkiler de vardır. Kullanıcılar otomatik olarak indirme özelliğini kapatmış olsa bile, tarayıcı hala belirtilen boyutlarda alanı gösterir. Bu genellikle okuyuculara boş bir çerçeve bırakır, içinde anlamsız bir simge olan ve bu görselin konumunu gösteren. Bu durumda sayfa oldukça kötü görünebilir, tamamlanmamış gibi görünebilir ve içeriklerin büyük bir kısmı boş kalabilir. Belirtilen boyutları kullanmazsanız, tarayıcı sadece metin içinde bir görsel ikonu yerleştirir, bu durumda en azından bazı metinler okunabilir.
Bu sorunun için henüz bir çözümümüz yok, ancak bir noktayı vurgulamak istiyoruz, yani alt özelliğiveAçıklamalı metinBu şekilde, okuyucular en azından eksik olan şeyin ne olduğunu bilsin. Yine de, ağ performansını iyileştirmeyi teşvik ettiğimiz için bu boyut özelliklerini kullanmanızı öneriyoruz.
