Skip to main content

Redimentione imagens com CSS mantendo a proporção

Redimensione imagens para qualquer resolução usando somente CSS. Perfeito para layouts fluidos!

Posted in Dicas, Tutoriais, CSS

Quando eu estava criando o blog eu não estava exatamente pensando em dispositivos móveis (celulares e afins). Na verdade eu pensava apenas em publicar o site para poder começar a escrever. Ao passar dos dias eu comecei a fazer alguns testes com o Opera Mobile Emulator e eu pude notar que meu blogestava horrendo nele. Alguns ajustes depois e tudo estava perfeito.

Até eu escrever este post.

O problema era: As imagens são publicadas usando o tamanho original que, normalmente, são maiores que o container. Para resolver esse problema eu poderia simplesmente redimensionar as imagens para que tenham a mesma largura do container. Mas e se o layout for fluido? E se a imagem também for usada em dispositivos móveis? [more]

A solução foi simples: Colocar o max-width em 90%.

#content article img { max-width:90%; }

Neste caso, a div #content e o elemento article (HTML5, alguém?) podem ter qualquer largura já que a imagem vai redimensionar automaticamente para 90% deles. Isso significa que se a largura da imagem tiver menos que 90% do tamanho do container ela não será redimensionada. Agora o mais importante: A proporção da imagem não muda, como você pode ver no print do emulador abaixo.

Essa foi a solução perfeita para o meu blog mas também pode ajudar em websites onde não temos controle sobre o tamanho das imagens que se serão publicadas.

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network: