Escala HTML IMG

Quando uma imagem é adicionada a um documento HTML, ela precisa ser adequadamente ajustada para manter uma melhor representação visual da interface. Mais especificamente, html “img”Escala significa ajustar a imagem em relação a diferentes parâmetros como“altura" e "largura”Para redimensionar a imagem. Sem redimensionar ou dimensionar, o tamanho original da imagem será exibido como seu tamanho padrão na saída. Para dimensionar as imagens HTML, as propriedades CSS “Altura” e “Largura” são usadas de maneiras diferentes.

Esta postagem cobrirá as seguintes abordagens:

• Método 1: Escalar uma imagem usando valores percentuais
• Método 2: Escalar uma imagem usando valores de pixel

Método 1: Escalar uma imagem usando valores percentuais

Os desenvolvedores podem aplicar o CSS “altura" e "largura”Propriedades no HTML“”Elemento e defina qualquer número de porcentagens no elemento de estilo CSS para definir o comprimento horizontal e vertical da imagem de acordo.

Exemplo
Vamos conferir um exemplo de redimensionamento ou dimensionamento da imagem usando as propriedades CSS. Suponha que tenhamos o seguinte recipiente, no qual as propriedades do CSS precisam ser aplicadas:

No trecho de código HTML acima:

• A "div”O elemento de contêiner foi adicionado à classe declarada como“ContainerImage”.
• Dentro da tag "div", há o "img”Tag com a“eu ia"Declarado como"minha identidade" e a "src”Atributo.
• O endereço de imagem exato do sistema foi adicionado como o valor do “src”Atributo. Isso adicionará a imagem selecionada do sistema no contêiner Div na saída.

Agora, é necessário aplicar as propriedades CSS no elemento HTML acima para escalar a imagem adicionada:

#minha identidade
largura: 50%;
Altura: 40%;

No elemento de estilo CSS acima:

• O "eu ia"Declarado no"img”O elemento é adicionado para se referir ao“" elemento.
• Dentro da div, o “largura”A propriedade é definida como“50%”. Isso ajusta a largura da imagem na tela para cobrir metade da área horizontal da tela.
• Depois disso, o “altura”A propriedade foi definida como“40%”Para cobrir a área“ 40%”de toda a tela vertical na saída.

Isso gerará a seguinte interface de saída:

Método 2: Escalar uma imagem usando valores de pixel

Quando o CSS redimensiona propriedades, eu.e., ““altura" e "largura”São aplicados definindo valores para eles em pixels, ele redimensiona a imagem na saída de acordo com o valor exato do pixel, em vez de ajustar o tamanho da imagem de acordo com toda a área da tela.

Exemplo
Vamos aplicar o CSS “altura" e "largura”Propriedades definindo seus valores em“px”(Pixels) para exatamente o mesmo snippet html adicionado na seção anterior deste post:

#minha identidade
Altura: 250px;
Largura: 550px;

No trecho de código CSS acima:

• O "altura”A propriedade foi definida como“250px”. Isso definirá a altura da imagem para exatamente 250 pixels.
• O "largura”A propriedade foi definida como“550px”Para definir a largura como exatamente 550 pixels na saída.

De acordo com o código acima, a imagem adicionada será dimensionada da seguinte maneira:

É assim que escalar uma imagem em html.

Conclusão

As imagens podem ser dimensionadas ou redimensionadas em um documento HTML usando o CSS “altura" e "largura”Propriedades. Para utilizá -los, declare um “eu ia"Ou um"aula”Para o html“”Elemento, adicione o respectivo seletor no elemento de estilo CSS e defina as propriedades de altura e largura do CSS para o elemento“ ”. A "altura" e a "largura" podem ser definidas adicionando valores na porcentagem ou pixels. Este blog discutiu as abordagens para escalar imagens em HTML.