HTML ile bir resim nasıl yeniden boyutlandırılır

0
18

HTML ile bir resim nasıl yeniden boyutlandırılır

Aşağıdaki adımlar, bir görüntüyü orijinal dosya boyutunda (KB veya MB olarak) tutmak ve görüntünün görüntü boyutunu HTML ile değiştirmek isteyen kullanıcılara rehberlik eder. Bu mümkün olsa da, dosya boyutunu küçültmek ve görüntünün indirme süresini azaltmak için bir görüntü düzenleyici kullanarak görüntüyü yeniden boyutlandırmanızı öneririz.

  • Görüntüleri görüntülemek, düzenlemek veya oluşturmak için hangi programı kullanabilirim?

Aşağıdaki adımlar kullanılarak bir görüntünün boyutu değiştirildiğinde, tarayıcıda daha küçük görünse bile daha büyük görüntüyü yüklemesi gerekir.

HTML ile yeniden boyutlandır

Aşağıdaki örnekte gösterildiği gibi IMG SRC HTML etiketinizdeki genişliği ve yüksekliği belirtin.

<img src="https://www.computerhope.com/cdn/computer-hope.jpg" width="200" height="40" alt="Computer Hope">

Resmin normal olarak nasıl göründüğü

bilgisayar umudu

Resmi yeniden boyutlandırmak için yukarıdaki kodu kullanma

bilgisayar umudu

Not

Bir görüntüyü yeniden boyutlandırırken en boy oranını korumanız gerekir. Aksi takdirde, görüntü bozulabilir ve görüntü kalitesini bir miktar kaybedebilir.

CSS ile yeniden boyutlandır

Aşağıdaki örneklerde gösterildiği gibi, bir görüntüyü CSS aracılığıyla da yeniden boyutlandırabilirsiniz.

img.resize {
  width:200px;
  height:40px;
}
img.resize {
  max-width:50%;
  max-height:50%;
}

İlk örnekte, genişlik ve yükseklik için piksel cinsinden gerçek boyut belirtilir. Bu seçeneği kullanmak, o CSS’yi kullanan görüntüleri sınırlar. Bir genişlik ve yükseklik belirlediğinden, bu yöntem 5:1 en boy oranına sahip değilse bozuk görüntülere neden olabilir.

İkinci örnek, piksel cinsinden boyut yerine hem genişlik hem de yükseklik olarak orijinal görüntü boyutunun bir yüzdesini belirtir. Bu seçeneğin kullanılması, daha geniş bir görüntü yelpazesiyle kullanım sağlar. Görüntü genişliği ve yüksekliğinin bir yüzdesi belirtildiğinden, tarayıcı hemen hemen her görüntüyü yeniden boyutlandırabilir ve en boy oranını koruyabilir.

CSS’yi bir IMG SRC HTML etiketine uygulamak için aşağıdakileri yaparsınız.

<img class="resize" src="https://www.computerhope.com/cdn/computer-hope.jpg"  alt="Computer Hope logo small">

O görüntü için CSS kodunu etkinleştirmek için yalnızca etikette sınıf adını belirtmeniz gerektiğinden, CSS kullanmak daha kısa IMG SRC etiketleri ile sonuçlanır.

LEAVE A REPLY

Please enter your comment!
Please enter your name here