Redimensione imagens para qualquer resolução usando somente CSS. Perfeito para layouts fluidos!
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.