HTML Ajuste o tamanho da imagem

“É muito comum as páginas da web terem imagens de diferentes tipos. Eles fazem uma página da web parecer mais visualmente atraente. No entanto, escolher o tamanho certo de uma imagem é realmente importante porque uma imagem não deve ser muito grande para que ofuse o texto em sua página da web nem muito pequeno que mal possa ser visto. Portanto, neste tutorial, falaremos sobre as maneiras pelas quais você pode ajustar o tamanho da imagem em HTML com muita facilidade.”

O que queremos dizer com ajuste o tamanho da imagem em html?

O tamanho de uma imagem é uma combinação de sua altura e largura. Por exemplo, se tivermos uma imagem do tamanho 100 x 100, isso significa que a referida imagem terá uma altura e largura de 100 pixels. Ajustando o tamanho de uma imagem em HTML, significamos literalmente mudar a altura e a largura dessa imagem de acordo com nossos requisitos. Além disso, também não é obrigatório que uma imagem tenha a mesma largura e altura. Em outras palavras, é perfeitamente normal para uma imagem ter uma altura e largura diferentes. Agora, vamos aprender os métodos de ajustar o tamanho de uma imagem em html.

Como ajustar o tamanho da imagem em html?

Você pode ajustar facilmente o tamanho de qualquer uma das imagens desejadas em HTML seguindo qualquer um dos dois métodos explicados abaixo. No entanto, antes de avançar com esses métodos, gostaríamos de mostrar a imagem cujo tamanho desejamos ajustar usando esses métodos. Esta imagem é a seguinte:

O tamanho original desta imagem é 900 x 900, eu.e., A altura, bem como a largura desta imagem, é de 900 pixels, conforme destacado na imagem abaixo:

Método 1: usando as propriedades simples de altura e largura do HTML

Neste método, usaremos as propriedades simples de altura e largura do HTML para ajustar o tamanho da nossa imagem especificada. Você pode atribuir qualquer valor de sua escolha a essas propriedades. O script html para este método é o seguinte:

Neste método, nosso foco principal é ajustar o tamanho da imagem, para o qual fizemos uso do atributo "IMG" do HTML. Este atributo é usado sempre que você quiser brincar com imagens em html. Em seguida, usamos o atributo "SRC", com a ajuda de que nos referimos ao caminho exato ou local onde nossa imagem de destino reside. Você pode ver que, após esse atributo, mencionamos o caminho completo da imagem desejada. Em seguida, temos o atributo "alt", que existe para mencionar qualquer texto alternativo para descrever a imagem. Você tem permissão para pular este atributo. Isto é seguido pelas propriedades de "largura" e "altura" de html. Mantivemos os valores de ambas as propriedades como "400". Isso significa que este script exibirá nossa imagem de destino em um tamanho reduzido após a execução.

A página da web mostrada na imagem abaixo exibe nossa imagem em tamanho 400 x 400.

Método 2: usando o atributo de estilo de HTML

Este é apenas um método alternativo de ajustar o tamanho de uma imagem em html. Faz uso do atributo de estilo embutido da HTML. Para usar esse método, você precisará dar uma olhada no seguinte script HTML:

Este script html é praticamente parecido com o que discutimos acima em nosso primeiro método. No entanto, desta vez, em vez de simplesmente especificar os valores das propriedades HTML de "altura" e "largura", usamos o atributo "estilo" e, em seguida, envolvemos essas propriedades dentro dele. Desta vez, queremos alterar o tamanho da nossa imagem de destino para 600 x 600.

Nossa imagem especificada com o tamanho recém -ajustada é mostrada na imagem abaixo:

Conclusão

Este tutorial foi projetado para guiá -lo sobre os métodos de ajustar o tamanho da imagem em HTML. Nesse sentido, compartilhamos dois métodos diferentes com você que são realmente fáceis de implementar. Depois de passar por esses dois métodos, você não achará difícil ajustar os tamanhos de suas imagens, eu.e., Aumentar ou diminuir o tamanho da imagem de acordo com seus requisitos enquanto trabalha com HTML.