CODEWITHSUNDEEP
htmlcssinternet-explorer
shennan
shennan

Reputation: 11666

Max-width and max-height for images in Internet Explorer 7

Yet again Internet Explorer is costing me time and money.

I'm making a responsive site and I'm needing my images to be no more than 100% width of their containing elements, but also no more than a certain percentage height in case they fall off the page.

Some CSS:

#content{

    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;

}

#featured{

    position:relative;
    width:100%;

}

#featured-images{

    text-align:center;

}

#featured-images img{

    max-height:80%;
    height:auto !important; /* IE fix */
    height:80%; /* IE fix */

    max-width:100%;
    width:auto !important; /* IE fix */
    width:100%; /* IE fix *

}

Some Markup:

<div id="content">
  <div id="featured">
    <div id="featured-images">
      <img src="lib/imgs/fi-1.jpg"/>
    </div>
  </div>
</div>

Currently, this page works on Chrome. It even works in IE6, and IE8+. I haven't tested it in Firefox or Opera. But IE 7 definitely doesn't play ball. It seems to shrink the image to quite a small degree, as if the browser has been resized to a stump.

I know it's not ideal, but I've been using IE NetRenderer to test.

Upvotes: 0

Views: 2814

Answers (2)

John
John

Reputation: 13739

Internet Explorer Conditional Comment Style Sheet...

http://www.jabcreations.com/web/css/ieccss

Works without JavaScript enabled.

No need for hacks, if IE requires the wrong values (e.g. height/width) instead of what you use then only the versions of IE you need to apply those pseudo-right values to will work.

That will let you keep all the IE-related nastiness out of your main style sheet and you can use a specific IECCSS per version of IE.

Upvotes: 0

Rishi Kulshreshtha
Rishi Kulshreshtha

Reputation: 1878

Its fixed, you can check it here:

<style type="text/css">
#content {
    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;
}
#featured {
    position:relative;
    width:100%;
}
#featured-images {
    text-align:center;
}
#featured-images img {
    max-height:100%;
    max-width:100%;
    height:auto;
    width:auto;
}
</style>

<div id="content">
    <div id="featured">
        <div id="featured-images">
            <img src="https://www.google.co.in/images/srpr/logo4w.png" />
        </div>
    </div>
</div>

Or here Fiddle http://jsfiddle.net/Fqebe/1/

Cheers!

Upvotes: 1

Related Questions