Redimensionamento forçado de imagens.

mai28.09

Bem algumas vezes temos que redimensionar uma imagem para “caber” em um determinado espaço.
O recomendado é que se faça o envio da imagem no tamanho correto, mas já tive algumas experiências que muitas vezes fica inviável redimensionar todas as imagens.
O que acontece em algumas situações é no layout o espaço reservado para a imagem ser reduzido ou aumentado, quando isso acontece é necessário alterar o tamanho para encaixar tudo.
Hoje, meio que por acaso esbarrei com uma propriedade de CSS específica para isso. Fui atrás para ver como funcionava.
A propriedade é a seguinte: -ms-interpolation-mode
É uma propriedade específica para o Internet explorer, já que os navegadores mais modernos já fazem automaticamente a suavização das imagens quando são redimensionadas.
Clique na imagem abaixo para ver o teste:

No Teste da pra ver a diferença gritante da qualidade do redimensionamento.
Para usar esse comandinho é muito simples: Basta adicionar a linha abaixo no CSS da imagem.

	-ms-interpolation-mode: bicubic | nearest-neighbor;

O Firefox e outros navegadores modernos como o Chrome e Opera já fazem a suavização automática, porém eles possuem uma propriedade para controlar a renderização da imagem:

	image-rendering:  auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges;

Mais informações na documentação no MSDN e na página da Mozilla.

Tags

, , ,


Posts Relacionados

Nenhum post relacionado ... =(

Gostou? Compartilhe:







Deixe o seu comentário.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ninguém comentou ainda ... =(