Tamanho da imagem HTML | Explicado

Tamanho da imagem HTML | Explicado

HTML nos permite usar imagens nas páginas da web e torná -las mais atraentes aplicando diferentes estilos. Se você precisar alterar a proporção da imagem ou sua imagem não se encaixa no layout da sua página da web, você pode redimensioná -la. Para esse fim, você pode utilizar o “largura" e "altura”Propriedades no“img" marcação. Esses valores de propriedade podem ser facilmente definidos em pixels CSS.

Neste manual, você aprenderá o método para redimensionar a imagem em html.

Antes de iniciar, é necessário adicionar a imagem ao arquivo html sobre o qual a operação de redimensionamento será executada.

Como incorporar uma imagem em html?

Para adicionar uma imagem no HTML, use a seguinte sintaxe:


A descrição da sintaxe acima mencionada é descrita abaixo. O "img”TAG usa dois atributos:

    • "SRC" é usado para fornecer o caminho (URL) da imagem.
    • "Alt" é usado para fornecer o texto alternativo se a imagem não for exibida.

Html

O código abaixo representa dois divs. Na primeira div, adicionamos um título no centro superior da nossa página da web como “Tamanho da imagem em html”Ao usar o

marcação:



Tamanho da imagem em html




A segunda div é adicionada com a classe chamada “recipiente”E para representar a imagem no centro, usamos a tag. Dentro do centro, escreva o código mencionado abaixo para adicionar uma imagem:






A imagem selecionada com “640*437”A proporção será assim:


A próxima seção demonstrará o método para redimensionar uma imagem.

Como redimensionar a imagem em html?

Você pode personalizar o tamanho da imagem ou redimensioná -la usando “largura" e "altura”Atributos para definir sua largura e altura.

Agora, vamos definir o valor de largura da imagem adicionada como “300”E veja como funciona:


Pode -se observar que a largura da imagem foi alterada e é redimensionada com sucesso:


Além da largura, o “altura”O atributo também pode ser utilizado para o mesmo objetivo. Para ver a diferença de tamanho, defina “550”Pixels como altura da imagem:


Você pode observar claramente a diferença no tamanho da imagem:


É assim que os atributos de largura e altura são usados ​​para redimensionar a imagem.

Conclusão

Em HTML, o “altura" e "largura”Os atributos são utilizados para redimensionar a imagem. Você pode alterar a proporção padrão da imagem adicionada, definindo os valores desses atributos. Como resultado, uma diferença clara pode ser vista em relação ao tamanho da imagem. Este blog demonstrou o método para usar propriedades de altura e peso para redimensionar imagens em html.