Html'de Resim Nasıl Küçültülür

İçindekiler:

Html'de Resim Nasıl Küçültülür
Html'de Resim Nasıl Küçültülür

Video: Html'de Resim Nasıl Küçültülür

Video: Html'de Resim Nasıl Küçültülür
Video: Resim Boyutu Nasıl Küçültülür? 2024, Nisan
Anonim

Köprü metni biçimlendirme dilinde (HTML), bir sayfada bir resmi görüntülemek için özel bir "etiket" komutu kullanılır. Bu etikete img adı verilir ve bir dizi değişken içerir - "nitelikler". Niteliklerin yardımıyla, boyutları da dahil olmak üzere bir hiper metin sayfasındaki bir görüntünün görüntüsünün tüm yönlerini belirleyebilirsiniz. Ancak, sorunu çözmenin tek yolu bu değildir - Basamaklı Stil Sayfalarını (CSS) kullanarak görüntünün boyutunu da küçültebilirsiniz.

Html'de resim nasıl küçültülür
Html'de resim nasıl küçültülür

Talimatlar

Aşama 1

İstenilen görüntünün görüntülenmesinden sorumlu etikete yükseklik ve genişlik niteliklerini yerleştirin. İlkini resmin dikey boyutuna, ikincisini yatay olarak ayarlayın. Her iki sayıyı da piksel olarak ayarlayın, ancak burada birimleri - px - belirtmeye gerek yoktur. Bu nitelikler için gerekli değerleri hesaplarken, resmin küçültme oranlarına uyulmasına dikkat edin, aksi takdirde çarpık bir biçimde görüntülenecektir. Örneğin, ilk boyutları 500 x 300 piksel olan SomePic.

Adım 2

Orijinal görüntü boyutlarının orantılı küçültülmesini yüzde olarak ayarlayabilirsiniz. Bunu yapmak için, genişlik belirtmeden yalnızca height niteliğini kullanın ve boyut tanımlama numarasını belirttikten sonra bir yüzde işareti ekleyin. Örneğin, bu formda yazılmış bir etiket ile önceki adımdaki örnekte olduğu gibi aynı efekti elde edebilirsiniz:

Aşama 3

Stillerin açıklamasını kullanarak görüntünün boyutunu belirtmek istiyorsanız, aynı etiket adını - img - ve öznitelikleri - genişlik ve yükseklik kullanın. Bu durumda, ölçüm birimleri - px, pt veya % - her zaman belirtilmelidir. Sayfadaki kesinlikle tüm resimlerin boyutunun yarıya bölünmesini ayarlamak için, stil açıklama bloğuna şu girişi yerleştirin: img {height: 50%;} Yalnızca bir resmin boyutunu küçültmeniz gerekiyorsa, ek bir id özelliği ekleyin etiketine ekleyin ve bu sayfa değerinin görüntüleri için benzersiz bir tane atayın - örneğin, PicOne: Etiket adından bir "karma" # ile ayırarak aynı değeri stil kaydına ekleyin. Bu durumda tam stil açıklaması şöyle görünebilir: img # OnePic {height: 50%;}

Önerilen: