você está aqui: Home  → Arquivo de Mensagens Programe sua mente para aprender inglês - ebook gratuito

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