Stretched image in Internet Explorer

Asked

Viewed 750 times

6

On a page I’m developing, a web page where I have an image that fits itself according to the field space. to do this, I used the property max-width:100% that is advised on the web to make this kind of adaptation in responsive templates.

My problem is that when checking in browser IE9, this image is responsive in width but gets stretched 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%;
}

Also in the put in the Jsfiddle.

html css internet-explorer-9

2 answers

5


I found the solution by inserting in the image itself a value for an old tag that defines the width of the same cause that she be informed so:

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

in CSS continued the same information for other browsers:

#logo{
    max-width: 100%
}

  • If you give a width on the img tag, the height will always be proportional. I think this is your solution.

  • no, actually it should be like this but by irony uncle bill the IE9 does not respect this pattern and it resizes alone...

  • 1

    ready @Ricardo

2

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

  • A plugin is a good idea, the problem is that when using the same you end up being hostage to the plugin and in some cases can not use to the maximum. I always look for free plugins or libs solutions ready, even if they get more code... even so Thanks @Kenny-rafael.

  • 1

    I fully agree with you, anyway, sometimes it becomes interesting to use something...I think valid this plugin because it was made specifically for this type of situation, but, nobody better than the developer himself to know what is best for your application. At the head office!

Browser other questions tagged html css internet-explorer-9

You are not signed in. Login or sign up in order to post.