Eu tenho um fragmento HTML simples:
<div>
<img src="http://www.placehold.it/200x200">
<p>Lorem ipsum da dee da herp de derp I like coffee coffee coffee</p>
</div>
Meu CSS:
div {max-width: webkit-min-content; max-width: -moz-min-content;}
img {max-width: 100%}
Fiddle: http://jsfiddle.net/vs2zxc8c/1/
Veja como fica no Firefox e encolha a tela da janela. Esse é o comportamento que eu quero: Quando houver espaço disponível, a imagem tem o seu tamanho normal e o texto passará por baixo da imagem. Quando a imagem transbordar, eu quero encolhe-la. Isto funciona no Firefox.
No entanto, a versão webkit parece não funcionar. Aplicando max-width:100%
na imagem faz com que a imagem encolha para o tamanho da palavra mais longa do parágrafo.
Existe uma correção para isso em navegadores -webkit, ou isso é um bug?