Redimensionar e Não Distorcer Imagens com CSS

Não Distorcer Imagens com CSS

Usando o CSS é muito simples colocar imagens no nosso website sem distorcer as imagens.

Bastará colocar fixar uma das dimensões e colocar a outra dimensão em “auto”. Dessa forma, a imagem vai ser redimensionada de acordo com a dimensão fixada e a outra dimensão vai ser alterada para que a imagem não altere a sua relação altura-largura, ou seja, para não distorcer a imagem.

Se quiser fixar a largura:
{width: 100px; height: auto;} /*Fixar largura a 100px*/
{width: 10%; height: auto;} /*Fixar largura a 10% da largura disponível*/

Se quiser fixar a altura:
{height: 100px; width: auto;} /*Fixar altura a 100px*/
{height: 10%; width: auto;} /*Fixar altura a 10% da altura disponível*/

Para usar no seu site poderá criar a classe CSS ou poderá fazer directamente no seu código:
<img src="/images/logo.png" alt="Não Distorcer Imagens com CSS" width="150px" height="auto" />

Não Distorcer Imagens com CSS

Este é o exemplo anterior. Em que que se fixou a largura a 150 pixeis e a altura foi redimensionada automaticamente de modo a não distorcer a imagem.

Não Distorcer Imagens com CSS no WordPress

No nosso blog wordpress, por exemplo, quando inserimos uma imagem mais larga que o espaço disponível para o conteúdo do nosso post a imagem poderá ficar fora desse espaço.

redimensionar imagem wordpress
A forma mais simples e prática de redimensionarmos as nossas imagens é através de CSS.

Em vez de estarmos sempre a redimensionar as imagens antes de fazer o upload para o nosso blog, podemos usar o seguinte código:

img {
max-width:100%;
height: auto;
}

Basta editarmos a nossa folha de estilos, “style.css” na maioria dos casos, e acrescentar estas linhas de código na zona das definições de imagens.

O que este código faz é ajustar a largura máxima da imagem à largura máxima disponível. Por isso, se a imagem tiver uma largura superior à disponível, o “CSS” vai diminuir a largura da imagem para a máxima disponível, e com o “height=auto” vai fazê-lo sem mudar a relação altura-largura da imagem, de modo a não distorce-la.

Com este código nunca mais vai ter de se preocupar com o tamanho das imagens nos seus posts.

Qualquer dúvida, dificuldades, sugestão ou correcção deixe o seu comentário abaixo.

Sobre Diogo Gomes

Farto de trabalhar para os outros e insatisfeito com a vida que tinha,… procurou alternativas na internet.

Hoje trabalha 100% a partir de casa, sem horários, com férias ilimitadas e rendimentos ilimitados.

Apaixonado por ciências exactas, programação, internet, viajar, festas, conhecer pessoas, bilhar, mar, queijo e chocolate

Siga-me no

Porque Você Nunca Irá Ter Sucesso Online

Subscreva este blog:

...e Receba Grátis o Livro Best-Seller
"Porque Você Nunca Irá Ter Sucesso Online"

Marcado com: , , , , , ,
9 comentários sobre “Redimensionar e Não Distorcer Imagens com CSS
  1. Gustavo disse:

    Estava com o mesmo problema no IE.

    Funcionou tão bem que não pude deixar de comentar.

    Obrigado pela dica.

  2. Diogo,
    parabéns pelo artigo. Comigo funcionou apenas após retirar o ponto antes de img.
    Abraço.

  3. Joõa Paulo disse:

    Funcionou PERFEITAMENTE!
    Estava com um problema em um tema que estava modificando e as imagens (que vieram importadas de outro blog meu) ficavam fora da área do Post!
    Agora sim ficou PERFEITO! OBRIGADO PELA DICA!

  4. Matheus disse:

    Muito bom, obrigado =).

  5. Funcionou perfeito!
    Muito obrigado Diogo Gomes.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*

Arquivo