0

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?

0

1 Resposta 1

1

Podes resolver este problema definindo o tamanho da div onde se encontram os outros elementos.

Exemplo:

div {max-width: 100%;} 
img {max-width: 100%} 

Deste jeito, como no exemplo,ele ocupara a tela na sua plenitude (refiro-me a largura) e só assim ela já é responsiva.

Desta forma funcionará em todos os browsers, pois aplicamos uma regra "universal".

Nota:

  • Para definir a largura da div utilizei % para permitir um comportamento "responsivo", ou seja, para dar adaptabilidade de acordo ao tamanho da tela.
9
  • Você pode fornecer um exemplo completo para que eu entendo? Commented 8/10/2014 às 15:57
  • Posso sim, mas se fizeres as modificações que sugeri no fiddle do teu exemplo poderás observar @NickManning
    – Cold
    Commented 8/10/2014 às 16:04
  • Eu fiz, mas o número é maior do que a imagem agora. Commented 8/10/2014 às 16:05
  • Sim, porque no meu exemplo eu coloquei 100%, tu podes colocar a percentagem necessária, ou teste já com os 200px e funcionara numa boa.
    – Cold
    Commented 8/10/2014 às 16:11
  • Eu preciso do número a ser a mesma largura que a imagem, mas eu não sei o tamanho da imagem será. Commented 8/10/2014 às 16:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .