Redimensionamento Proporcional de Imagem com JavaScript sem distorção

Nino Giovanny — Tue, 29 Dec 2009 06:00:15 +0000

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:

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

HTML para Iniciantes – Aula 3

Nino Giovanny — Fri, 02 Oct 2009 17:36:21 +0000

Olá,

O HTML é a principal parte no desenvolvimento de uma página. É através dele que vamos colocar todo o conteúdo de um site à disposição dos usuários. Basicamente, existem três níveis no desenvolvimento web: o conteúdo, construído pelo HTM; a formatação desse conteúdo, tratada pelo CSS, de modo a deixá-lo mais usável e atraente; e o comportamento, controlado, por exemplo, pelo Javascript e Ajax. Focaremos nesse momento apenas no HTML.

É evidente nos últimos anos que o desenvolvimento do HTML trouxe uma relevante melhoria no que diz respeito a semântica dos conteúdos colocados nas páginas. Dentro dessa tendência posto abaixo uma tabela com tags implementadas no HTML5.


Tag	Description
	Comentário
	Defines o tipo de documento HTML
	Link. O atributo href define o endereço do link
	Define uma abreviação
	Define um endereço
	Define uma área, estabelecida por coordenada e que pode ser linkada, em uma imagem adicionada no html
New	Define um determinado texto como um artigo
New	Define um termo de determinado artigo
New	Conteúdo de áudio
	Defines bold text
	Define uma URL base para todos os links em uma página
	Define a direção do texto de exibição
	Citação longa
	Corpo de um documento html
	Quebra de linha simples
	Define um button =
New	Define um gráfico

Define um título no cabeçalho da tabela
	Citação
	Define um código de determinada linguagem de programação

define o numero de colunas que uma tabela terá;

Grupos de colunas de uma tabela
New	Define um button de comando
New	Usado para representar uma lista of dados em um menu drop-down
	Define um iten em uma lista com definições
	Texto deletado
New	Detalhes de um elemento
New	Diálogo (Conversação)
	Definição de um termo
	Seção de um documento
	Iten de uma lista de definição
	Termo de definição
	Enfatiza um texto (deixa, como padrão, em itálico)
New	Plugin ou conteudo interativo externo
	Define um campo com termos semelhantes em um formulário
New	Insere uma mídia com conteúdo e sua legenda
New	Seção de rodapé da página
	Define um formulário
to	Define títulos
	Define informações sobre o documento
New	Define um cabeçalho para uma seção ou uma página
New	Informação sobre determinada seção em um documento
	Cria uma linha horizontal
	Define um documento HTML
	Texto em itálico
	Cria um frame dentro da página em vez de dividí-la
	Imagem
	Define um campo input
	Texto inserido no documento
New	Usada para processar formulários com sistema de gerenciamento de certificados
	Indica que os caracteres devem ser digitados do teclado
	Define uma label (rótulo)
	Título do fieldset de um form
	Item de uma lista
	Define o link para um recurso (script, por exemplo) externo
	Define uma imagem com regiões clicáveis
New	Destacar parte de um texto
	Cria a lista de opções de um menu
	Informações do tipo META localizadas no HEAD do documento
New	Medições em um intervalo pré-definido
New	Link de navegação

NinoGiovanny.WordPress.com

Redimensionamento Proporcional de Imagem com JavaScript sem distorção

HTML para Iniciantes – Aula 3

to