De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

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

Adicionar comentário

* Campos obrigatórios
5000
Powered by Commentics

Comentários

Nenhum comentário ainda. Seja o primeiro!


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