você está aqui: Home  → Arquivo de Mensagens

Redimensionamento automático de imagens em páginas html

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 12 de julho de 2018

As páginas html de muitos portais são divididas em colunas. Às vezes uma imagem extrapola os limites da coluna na qual foi posicionada, o que nos leva a reduzir o tamanho da imagem. Mas esta não é a melhor forma de se lidar com o problema. O ideal é utilizar diretivas html que façam o redimensionamento automático da imagem para caber dentro do local na qual se encontra inserida.

Podemos fazer isto através da tag img:

 <img src=imagem.png width=100%> 

A diretiva width=100% sinaliza que a imagem deve ocupar todo o espaço a ela reservado e não mais.

A outra forma é criar uma classe CSS:

img {
    max-width: 100%;
    max-height: 100%;
}

Para usar, basta especificar a classe CSS na definição da imagem:

<div class=img>
<img src=imagem.png>
</div>

Referências

How do I auto-resize an image to fit a div container



Veja a relação completa dos artigos de Rubens Queiroz de Almeida

 

 

Opinião dos Leitores

Seja o primeiro a comentar este artigo
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script