HTML <img> yükseklik özniteliği
Tanım ve Kullanım
yükseklik öznitelik, pixel olarak ölçülen görüntü yüksekliğini belirler.
İpucu:Her zaman görüntüye belirtmeniz gereken yükseklik ve width özelliği。Eğer yükseklik ve genişlik ayarlandıysa, sayfa yüklenirken görüntüye gerekli alan ayrılır. Aksi takdirde, bu özellikler yoksa, tarayıcı resmin boyutlarını bilmez ve uygun alan ayıramaz. Bu, sayfa düzeninin yüklenme sırasında değişmesine neden olur (görüntü yüklenirken).
İpucu:kullanım yükseklik ve width Büyük görselleri küçültme, kullanıcıların büyük görselleri zorunlu olarak indirmesini sağlar (daha küçük görünümlü olsa bile). Bu durumu önlemek için, görseli sayfada kullanmadan önce, görsel işleme yazılımı ile boyutunu yeniden ayarlayın.
Daha fazla okuma:height ve width özelliklerinin ayrıntılı açıklaması
Örnek
600 piksel yüksekliği ve 500 piksel genişliği olan bir resim:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sözdizimi
<img height="pixels">
Özellik değeri
| Değer | Açıklama |
|---|---|
| pixels | Görselin yüksekliğini piksel cinsinden belirleyin (örneğin height="100"). |
Daha fazla örnek
Görsel boyutunu değiştirme - Doldurma görseli oluşturma
height ve width özelliklerinin gizli bir özelliği, resmin gerçek boyutunu belirtmemek gerekmeyen, yani bu iki değer gerçek boyuttan büyük veya küçük olabilir. Tarayıcı, bu tahsis edilen alan boyutuna uyum sağlamak için otomatik olarak görseli ayarlar. Bu yöntemle, büyük görseller için küçük görseller oluşturmak ve küçük görselleri büyütmek kolayca yapılabilir. Ancak, dikkat edilmesi gereken bir nokta vardır: Tarayıcı, nihai olarak ne kadar büyük gösterirse göstersin, tüm dosyayı indirmek zorundadır ve orijinal genişlik ve yükseklik oranını korumazsa, görsel bozulabilir.
height ve width özelliklerinin başka bir 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 kullanmak istediğiniz rengi ona atamanız gerekecek. Daha sonra height ve width özelliklerini daha büyük boyutlara genişletmek için kullanabilirsiniz.
<img src="/i/ct_1px.gif"}} width="200px" height="30px" />
Yukarıdaki HTML'in etkisi budur, bu renkli çubuk yalnızca bir piksel genişliğinde bir görsel kullanılarak yapılmıştır:
Yüzdelik değer kullanımı
width özelliğinin sonuncu ipucu, pixelin mutlak değerini yüzdelik değerle değiştirmektir. Bu, tarayıcıya resmi ekran penceresinin belirli bir oranına göre ölçeklendirme olanağı sağlar. 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, şu şekilde gerçekleştirebilirsiniz:
<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:Bir yüzdelik width değeri sağlanmış ve height göz ardı edilmişse, genişletilse veya küçültülse, 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 bakın:
<img src="/i/ct_1px.gif"}} width="20%" />
Yani, sadece ct_1px.gif görselin width özelliklerinin yüzdesini ayarladıysanız, bir düzengi görsel elde edersiniz (çünkü orijinal ct_1px.gif sadece 1px genişlik ve yüksekliğe sahip bir düzengi görseldir):
İpucu:Yukarıdaki örnekleri sunmamızın amacı, size height ve width özelliklerinin kullanımını daha iyi anlamak içindir. Sadece büyük alanlı saf renk blokları sayfayı süslemek için ihtiyacınız varsa, daha iyi bir yöntemArka plan rengi oluşturmak için CSS kullanın.
height ve width özelliklerinin ayrıntılı açıklaması
height ve width özelliklerini neden kullanmalıyız
Doküman yüklenirken içeriğin düzenli olmayan hareketlerini gördünüz mü? Bu neden olur, çünkü tarayıcı her bir yüklenen görseli gösterebilmek için sayfa düzenini sürekli olarak ayarlar. Tarayıcı, görselin genişliğini ve yüksekliğini indirmek ve çözümlemek için kullanır ve ardından gösterim penceresinde bir benzeri alan bırakır. Sonra tarayıcı, görseli gösterim içine yerleştirmek için sayfa düzenini ayarlar. Bu da bize görsellerin bağımsız dosyalar olduğunu ve kaynak dosyalarla birlikte bağımsız olarak yüklediklerini 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örsel dosyasını kontrol etmek ve ekran alanını hesaplamak zorundadır. Bu, belgenin gösteriminde büyük gecikmelere neden olabilir ve okuyucunun okumayı kesebilir.
Yaratıcılar için daha etkili bir yöntem, <img> etiketinin height ve width özelliklerini kullanarak görselin boyutunu belirlemektir. Bu şekilde, tarayıcı görseli 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örsel boyutunu piksel cinsinden belirtir. Bu iki özellik <img> etiketinde出现的次序并不重要.
height ve width özelliklerinin sorunu
虽然 <img> etiketinin height ve width özellikleri performansı iyileştirebilir ve bazı küçük ipuçları uygulamak için sizi destekleyebilir, ancak bunları kullanırken bazı zorlu olumsuz etkiler de vardır. Kullanıcı otomatik olarak görselleri indirme fonksiyonunu kapatsa bile, tarayıcı hala görseller için belirlenen boyutlarda yer ayırmak zorunda kalır. Bu genellikle okuyuculara boş bir çerçeve bırakır, içinde anlamsız bir simge vardır ve bu görselin yerleştirildiği yeri belirtir. Bu durumda sayfa çok kötü görünebilir, tamamlanmamış gibi görünebilir ve çoğu içerik kullanılmaz hale gelir. Belirlenen boyutları kullanmazsanız, tarayıcı sadece metin içinde bir görsel simgesi yerleştirir, bu durumda en azından bazı metinler okunabilir.
Bu sorunun için henüz bir çözümümüz yok, sadece bir noktayı vurgulamak istiyoruz, o da bu kullanmaktır. alt özelliği veAçıklamalı MetinBu şekilde, okuyucu en azından burada ne eksik olduğunu bilmelidir. Yine de, ağ performansını iyileştirmeyi teşvik ettiğimiz için bu boyut özelliklerini kullanmanızı öneriyoruz.
Tarayıcı Desteği
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Destek | Destek | Destek | Destek | Destek |
