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.
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>
How do I auto-resize an image to fit a div container
This policy contains information about your privacy. By posting, you are declaring that you understand this policy:
This policy is subject to change at any time and without notice.
These terms and conditions contain rules about posting comments. By submitting a comment, you are declaring that you agree with these rules:
Failure to comply with these rules may result in being banned from submitting further comments.
These terms and conditions are subject to change at any time and without notice.
Comentários