O HTML nos permite usar imagens em páginas da web e torná-las mais atraentes aplicando estilos diferentes. Se você precisar alterar a proporção da imagem ou sua imagem não se encaixar no layout da página da Web, você poderá redimensioná-la. Para isso, você pode utilizar o “ largura ' e ' altura ” propriedades no “ imagem ' 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 no qual a operação de redimensionamento da imagem será executada.
Como incorporar uma imagem em HTML?
Para adicionar uma imagem em HTML, use a seguinte sintaxe:
< imagem src = 'imagens/borboleta.jpg' tudo = 'texto alternativo' >
A descrição da sintaxe acima mencionada é descrita abaixo. O ' imagem ” usa dois atributos:
-
- 'src' é usado para fornecer o caminho (URL) da imagem.
- 'tudo' é usado para fornecer o texto alternativo se a imagem não for exibida.
HTML
O código abaixo representa duas divs. Na primeira div, adicionamos um título no centro superior da nossa página da web como “ Tamanho da imagem em HTML ” usando a tag
:
< div >
< Centro >
< h1 > Tamanho da imagem dentro HTML h1 >
Centro >
div >
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 abaixo mencionado para adicionar uma imagem:
< div classe = 'recipiente' >
< Centro >
< imagem src = 'imagens/borboleta.jpg' tudo = 'texto alternativo' >
Centro >
div >
A imagem selecionada com “ 640*437 ” a proporção de aspecto ficará 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 da largura da imagem adicionada como “ 300 ” e veja como funciona:
< imagem src = 'imagens/borboleta.jpg' tudo = 'texto alternativo' largura = '300' >
Pode-se ver que a largura da imagem foi alterada e redimensionada com sucesso:
Além da largura, o “ altura ” também pode ser utilizado para a mesma finalidade. Para visualizar a diferença de tamanho, defina “ 550 ” pixels como altura da imagem:
< imagem src = 'imagens/borboleta.jpg' tudo = 'texto alternativo' largura = '300' altura = '550' >
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 ” 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 clara diferença 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.
A segunda div é adicionada com a classe chamada “ recipiente ” e para representar a imagem no centro, usamos a tag
< Centro >
< imagem src = 'imagens/borboleta.jpg' tudo = 'texto alternativo' >
Centro >
div >
A imagem selecionada com “ 640*437 ” a proporção de aspecto ficará 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 da largura da imagem adicionada como “ 300 ” e veja como funciona:
< imagem src = 'imagens/borboleta.jpg' tudo = 'texto alternativo' largura = '300' >
Pode-se ver que a largura da imagem foi alterada e redimensionada com sucesso:
Além da largura, o “ altura ” também pode ser utilizado para a mesma finalidade. Para visualizar 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 ” 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 clara diferença 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.