Stretched image in Internet Explorer

Question

Stretched image in Internet Explorer

Navigation

#1 by (5 votes)
#2 by (2 votes)

6

On a page I'm developing, a webpage where I have an image that adjusts itself according to the field space. to do this, I used the max-width:100% property that is advised on the web to make this kind of adaptation into responsive templates. My problem is that when checking in IE9 browser, this image is responsive in width but stretches in height. my code:

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%;
}

I also did not put here in JSFfile.

html5 css internet-explorer-9

asked by anonymous 16.12.2013 / 12:18

2 answers

2

The most suitable in these cases is to use something more professional, if it is not a background image of div , use this plugin for responsive images, it is called adaptive images

16.12.2013 / 16:30

Auto build tool for Delphi Adding a circle around an image in CSS

score 5 · Accepted Answer

I found the solution by inserting in the image itself a value for an old tag that defines the width of it, so that it is informed like this:

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

In CSS, the same information was maintained for other browsers:

#logo{
    max-width: 100%
}