Redimensionamento Proporcional de Imagem com JavaScript sem distorção
Aqui estava eu começando um código em JavaScript para redimensionar umas imagens numa página sem, contudo, perder a sua proporcionalidade. Eis que me deparo com um pequeno trecho de código que resolveria os meus problemas sem a necessidade de nada especial e que compartilho com vocês:
<html>
<head>
<script>
function redimensiona()
{
document.images['id_da_imagem'].width = 300;
}
</script>
</head>
<body>
<img id="id_da_imagem" src="endereco" onload="redimensiona() alt="imagem" />
</body
</html>
Ao redimensionamento acima basta que você o faça para largura, no caso 300px (não importando o tamanho original da imagem), os próprios js e browser se encarregam de redimensionar a altura da imagem mantendo sua proporcionalidade original sem distorcê-la. Simplório porém eficiente.
Vale ressaltar que esse redimensionamento não altera as dimensões ou resolução da imagem no servidor, logo ela demorará a ser carregada igualmente como se tivesse sendo mostrada no browser ainda com tamanho original.
Abraço
Parabéns, funcionou perfeitamente.
Existe alguma maneira de eu definir no arquivo CSS uma class ou ID que fizesse o redimensionamento automático de uma imagem?
Tipo, eu definiria no arquivo CSS que a imagem com class “.tamanho_img” teria { 300 pixels de largura e 200 pixels de altura }
Então a toda imagem que eu colocasse o class=tamanho_img ficaria com essa dimensão.
Indo além, existiria também alguma forma de eu definir no CSS uma largura padrão de 400 pixels e a altura seria variável conforme a proporção. Por exemplo, a imagem teria o a class “novotamanho” e o .novotamanho estaria definido assim: { largura: 400px; altura: 100% } onde esse 100% seria a altura proporcional. Se a imagem original tivesse 900 pixels de largura e 1000 pixels de altura, seria exibida na minha página com 400 px de largura e uma altura proporcional a essa largura de 400px.
Espero ter explicado corretamente, caso você já tenha visto algo assim, por favor me diz.
Obrigado.