6

Numa página que estou desenvolvendo, uma página para a Web onde tenho uma imagem que se ajusta sozinha de acordo com o espaço do campo. para fazer isso, utilizei a propriedade max-width:100% que é aconselhado na web para fazer esse tipo de adaptação em templates responsivos.

O meu problema é que ao verificar no navegador IE9, essa imagem fica responsiva na largura mas fica esticada na altura.

O meu código:

HTML:

<div>
    <img id="logo" src="http://3.bp.blogspot.com/-mAbLcUMIhgc/Tp_1XrkQhfI/AAAAAAAAACU/pNqm50MEplM/s1600/imagem_noticia_02.jpg" class="transparent2" width="100%"/>
</div>

CSS:

html{
    background:#666;
}
div{
    width:50%; 
    height:100%; 
    margin-left:25%;
    background:#eee
}
#logo{
    max-width:100%;
}

Também no coloquei no JSFiddle.

2 Respostas 2

5

Encontrei a solução ao inserir na própria imagem um valor para uma antiga tag que define o width da mesma fazendo com que ela seja informada assim:

<img id="logo" src="img/logo.svg" class="transparent2" width="100%">

no CSS continuou a mesma informação para os outros browsers:

#logo{
    max-width: 100%
}
3
  • Se deres uma largura na tag img, a altura vai ser sempre proporcional. Acho que é esta a tua solução.
    – ninja_corp
    16/12/2013 às 16:17
  • não, na verdade deveria ser assim mas por ironia do tio Bill o IE9 não respeita esse padrão e ele redimensiona sozinho... 16/12/2013 às 16:27
  • 1
    pronto @ricardo 20/07/2015 às 11:10
2

O mais indicado nesses casos é usar algo mais profissional, caso não seja uma imagem de background da div, utilize este plugin para imagens responsivas, chama-se adaptive images

2
  • Um plugin é uma boa idéia, o problema é que ao usar o mesmo você acaba ficando refém do plugin e em alguns casos não consegue usar ao máximo. Sempre procuro soluções livres de plugins ou libs prontas, mesmo que fiquem com mais código... mesmo assim Obrigado @kenny-rafael. 16/12/2013 às 16:18
  • 1
    Concordo plenamente com você, de qualquer forma, as vezes se torna interessante utilizar algo...acho válido este plugin pois ele foi feito especificamente para este tipo de situação, mas, ninguém melhor que o próprio desenvolvedor para saber o que é melhor para sua aplicação. À disposição chefia! 16/12/2013 às 16:40

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 .