HTML, web sayfalarındaki resimleri kullanmamıza ve farklı stiller uygulayarak onları daha çekici hale getirmemize olanak tanır. Resmin en boy oranını değiştirmeniz gerekiyorsa veya resminiz web sayfanızın düzenine uymuyorsa, yeniden boyutlandırabilirsiniz. Bu amaçla, “ Genişlik ' ve ' yükseklik ” üzerindeki özellikler” resim ' etiket. Bu özellik değerleri, CSS piksellerinde kolayca ayarlanabilir.

Bu kılavuzda, HTML'deki görüntüyü yeniden boyutlandırma yöntemini öğreneceksiniz.

Başlamadan önce, resmi yeniden boyutlandırma işleminin gerçekleştirileceği HTML dosyasına resmi eklemek gerekir.

HTML'ye Resim Nasıl Gömülür?

HTML'de bir resim eklemek için aşağıdaki sözdizimini kullanın:

Yukarıda bahsedilen sözdiziminin açıklaması aşağıda açıklanmıştır. “ resim ” etiketi iki özellik kullanır:

• • 'kaynak' görüntünün yolunu (URL) sağlamak için kullanılır.
  • 'her şey' resim görüntülenmiyorsa alternatif metni sağlamak için kullanılır.

HTML

Aşağıdaki kod iki div'i temsil eder. İlk div'de web sayfamızın üst orta kısmına “ şeklinde bir başlık ekledik. HTML'de Resim Boyutu ”

etiketini kullanarak:

< div >
< merkez >
< h1 > Görüntü boyutu içinde HTML h1 >
merkez >
div >

İkinci div, “ adlı sınıfla eklenir. konteyner ” ve merkezdeki görüntüyü temsil etmek için

etiketini kullandık. Resim eklemek için merkezin içine aşağıdaki kodu yazın:

< div sınıf = 'konteyner' >
< merkez >
< resim kaynak = 'resimler/kelebek.jpg' her şey = 'alternatif yazı' >
merkez >
div >

“ ile seçilen görüntü 640*437 ” en boy oranı şöyle görünecektir:

Sonraki bölüm, bir görüntüyü yeniden boyutlandırma yöntemini gösterecektir.

Görüntüyü HTML'de Nasıl Yeniden Boyutlandırabilirim?

“ kullanarak görüntünün boyutunu özelleştirebilir veya yeniden boyutlandırabilirsiniz. Genişlik ' ve ' yükseklik ” genişliğini ve yüksekliğini ayarlamak için nitelikler.

Şimdi eklenen görselin genişlik değerini “olarak ayarlayalım. 300 ” ve nasıl çalıştığını görün:

< resim kaynak = 'resimler/kelebek.jpg' her şey = 'alternatif yazı' Genişlik = '300' >

Görüntü genişliğinin değiştirildiği ve başarıyla yeniden boyutlandırıldığı görülebilir:

Genişliğe ek olarak, “ yükseklik ” niteliği de aynı amaçla kullanılabilir. Boyut farkını görüntülemek için “ 550 ” görüntü yüksekliği olarak piksel:

< resim kaynak = 'resimler/kelebek.jpg' her şey = 'alternatif yazı' Genişlik = '300' yükseklik = '550' >

Görüntü boyutundaki farkı açıkça gözlemleyebilirsiniz:

Görüntüyü yeniden boyutlandırmak için genişlik ve yükseklik nitelikleri bu şekilde kullanılır.

Çözüm

HTML'de, “ yükseklik ' ve ' Genişlik ” öznitelikleri görüntüyü yeniden boyutlandırmak için kullanılır. Bu özniteliklerin değerlerini ayarlayarak eklenen görüntünün varsayılan en boy oranını değiştirebilirsiniz. Sonuç olarak, görüntü boyutuna göre açık bir fark görülebilir. Bu blog, HTML'deki görüntüleri yeniden boyutlandırmak için boy ve ağırlık özelliklerini kullanma yöntemini göstermiştir.