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="http://trabalharonline.com/wp-content/uploads/2014/07/logo_233x233.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"

2 comentários sobre “Não Distorcer Imagens com CSS
  1. Bruno disse:

    Muito bom! Me ajudou muito! Parabéns e Obrigado!

Deixe uma resposta

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

*

Arquivo