HTML <img> width özniteliği

HTML <img> etiketi

tanımı ve kullanımı

width özniteliği, pixel olarak ölçülen resmin genişliğini belirler.

İpucu:resim için height ve width özniteliği iyi bir alışkanlık olacaktır. Bu öznitelikleri ayarladıysanız, sayfa yüklenirken resim için alan ayırabilirsiniz. Bu öznitelikleri ayarlamazsanız, tarayıcı resmin boyutunu anlamayacak ve uygun alanı ayıramayacaktır, bu yüzden resim yüklenirken sayfa düzeni değişecektir. (Aşağıdaki paragraflar bu görüşü detaylandırmaktadır).

İpucu:Lütfen height ve width özniteliklerini kullanarak resmi ölçeklendirmek. Eğer height ve width Özellikle resmi küçültmek için, kullanıcıların büyük kapasiteli resimleri indirmesi gerekecek (çünkü resim sayfada çok küçük görünüyor olsa bile). Doğru yaklaşım, resmi web sayfasında kullanmadan önce yazılım aracılığıyla uygun boyutta işlemek olacaktır.

Daha fazla okuma:height ve width özelliklerinin açıklaması

Örnek

Yüksekliği 600 piksel, genişliği 500 piksel olan bir görsel:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Kişisel olarak deneyin

Sözdizimi

<img width="pixels">

Özellik değeri

Değer Açıklama
pixels Görselin genişliğini piksel cinsinden belirleyin (örneğin width="100").

Daha fazla örnek

Görsel boyutunu değiştir - Doldurma görseli oluşturma

height ve width özelliklerinin gizli bir özelliği, resmin gerçek boyutunu belirtmemektir, 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 kolayca özetler oluşturabilir ve çok küçük görselleri büyütebilirsiniz. Ancak, dikkat edilmesi gereken bir nokta şudur: Tarayıcı, nihai olarak ne kadar büyük gösterileceğine bakılmaksızın, tüm dosyayı yükleme zorunluluğu devam eder ve orijinal genişlik ve yükseklik oranını korumazsa, görsel bozulabilir.

height ve width özelliklerinin bir diğer tekniği, sayfa alanını kolayca doldurmak ve belge performansını iyileştirmektir. Dokümanda bir renkli dikey çubuk yerleştirmek istediğinizi düşünün. Tam boyutlu bir görsel oluşturmanıza gerek yok, aksine, genişliği ve yüksekliği bir piksel olan bir görsel oluşturmanız yeterli olacaktır. Bu görseli, kullanmak istediğiniz rengi ona atadıktan sonra, height ve width özellikleriyle daha büyük bir boyuta genişletin.

<img src="/i/ct_1px.gif"} width="200px" height="30px" />

Bu HTML'in etkisi budur, bu renkli çubuk tek bir piksel genişliğinde bir görsel kullanılarak yapılmıştır:

Yüzde ifadesi kullanarak

width özelliğinin en son tekniği, pixelin mutlak değerini yerine yüzde ifadesi kullanmaktır. Bu, tarayıcının resmi tarayıcı ekranının belirli bir oranına göre ölçeklendirmesini 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 yapabilirsiniz:

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

Doküman penceresinin boyutu değiştiğinde, bu resmin boyutu da değişir:

İpucu:Bir yüzde ifadesi olan width değeri sağlandıysa ve height göz ardı edildiyse, hem genişletilirse hem de küçültülirse, 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'nin width özelliğinin yüzdesel değerini ayarsanız, bir矩形状象 (çünkü orijinal ct_1px.gif sadece 1px geniş ve yüksek olan bir dörtgen) alırsınız:


Kişisel olarak deneyin

İpucu:Verdiğimiz örneklerin amacı, height ve width özelliklerinin kullanımını daha iyi anlamak içindir. Sadece büyük bir tek renkli blokla sayfayı süslemek istiyorsanız, daha iyi bir yöntemArka plan rengi oluşturmak için CSS kullanma.

height ve width özelliklerinin açıklaması

height ve width özelliklerini neden kullanmalıyız

Doküman yüklenirken içeriğin düzenli olmayan bir şekilde hareket ettiğini görmüşsünüz mü? Bu durumun nedeni, tarayıcının her bir yüklenen görseli gösterebilmek için sayfa düzenini sürekli olarak ayarlamasıdır. Tarayıcı, görselin genişliğini ve yüksekliğini indirmek ve çözümlemek için kullanır, ardından gösterim penceresinde bir benzeri boş bir dikdörtgen alan bırakır. Sonra tarayıcı, görseli gösterecek şekilde 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, belgenin en etkili gösterim yöntemi değildir, çünkü tarayıcı, yanındaki 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österimine büyük bir gecikme getirebilir ve kullanıcı 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 yerini ayırır, bu da belgenin gösterimini hızlandırabilir ve belge içeriğinin hareketini önleyebilir. Bu iki özellik, tam sayısal değerlerdir ve görsel boyutunu belirlemek için piksel biriminde ifade edilirler. Bu özellikler <img> etiketinde ne zaman ortaya çıktıklarına önem vermez.

height ve width özelliklerinin sorunu

虽然 <img> etiketinin height ve width özellikleri performansı iyileştirebilir ve bazı küçük ipuçları gerçekleştirmenizi sağlar, ancak bunları kullanırken bazı tüyler söktüğü 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, bu da görsel konumunu gösterir. Bu durumda sayfa çok kötü görünebilir, tamamlanmamış gibi görünür ve çoğu içerik kullanılmaz hale gelir. Belirlenen boyutları kullanmazsanız, tarayıcı sadece metinde bir görsel simgesi yerleştirir, bu durumda en azından bazı metin okunabilir.

Bu soruna henüz bir çözümümüz yok, sadece bir noktaya vurgu yapabiliriz, o da bu kullanmaktır. alt özelliği veAçıklamalı MetinBu şekilde, okuyucular en azından burada ne eksik olduğunu bilsin. Ayrıca, ağ performansını iyileştirmeye yönelik her türlü davranışı teşvik ettiğimiz için bu boyut özelliklerini kullanmanızı öneririz.

Tarayıcı Desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek

HTML <img> etiketi