CODEWITHSUNDEEP
htmlcssinternet-explorerresponsive-images
Sean Laibinis
Sean Laibinis

Reputation: 31

Internet Explorer responsive images losing aspect ratio

Internet Explorer will sometimes lose the aspect ratio of responsive images using max-width: 100% whether or not height: auto is set. The 'sometimes' depends on the image file used. So this is not a coding issue, but a glitch in IE that occurs with certain images when trying to use max-width: auto.

An example can be seen in a website I am currently building for my wife at www.ladyjaneart.com/gallery. Check it out in IE and another browser to see what I mean.

I am probably going to just go with fixed sizes in the end, but I am curious to see what is known about this issue. Has anybody run into this problem before? Any info on what conditions in the image files will cause it?

Upvotes: 2

Views: 5437

Answers (3)

Matt McManis
Matt McManis

Reputation: 4675

Swap height: auto for max-height.

max-width: 100%;
max-height: 300px;

Here's a screenshot in IE, images maintain aspect ratio. enter image description here

Upvotes: 0

Martin
Martin

Reputation: 22760

You can work around your issue with pure CSS (no need for Javascript)

Using HTML5 markup:

HTML:

<figure>
<img src='thepicture.jpg' alt='image'>
</figure>

CSS:

figure {
    max-width: 400px;/*Or whatever;*/
    width: 40%; /* or Whatever */

}
figure > img {
    width:100%;
    height:auto;
    margin:0;

}

What this does is that the <figure> element contains the img and the image then automaticaly scales to the size of the figure element. The scaling is done to fit the box, rather than on the image directly, so there is much less option for a false aspect ratio.

Please note the <img> tag does not specify width or height, this is done entirely with CSS.

The figure tag sets the maximum (and minimum) size of the dimensions and then the figure >img rule ensures that the image fills these given dimensions.

On a side note, what will often happen is various browsers will get confused with aspect ratio and layout if they are given min- or max- properties but not given a standard. For example, giving IE a max-width: property without giving it a standard width property will cause the sort of inconsistency you are mentioning.

If width is 100% then this is already maximum so there's no need to also define max-width of the same element. Same with min-width, it's simply not needed unless the size is a percentage or other non-fixed variable (such as rems) which is not 100% or 0%.

Further note:

box sizing correctly for these sort of things can also be helped by ensuring that you use box-sizing:border-box so that width + padding is not greater than the expected width, for example. width:66%: padding:1rem means that the box size will actually be 2rem + 66%. So then with a margin of 33% this will cause an offset. 

figure {
    max-width: 400px;/*Or whatever;*/
    width: 40%; /* or Whatever */
    box-sizing:border-box;
}

Upvotes: 0

user2940296
user2940296

Reputation: 153

To preserve aspect ratio, only specify height OR width, like width:100%. That is enough. The other will be automatically adjusted.

You can also determine max dimensions using JavaScript and use them accordingly.

<script type="text/javascript">
    function CalculateImageSize(id){
        var image = document.getElementById(id);
        var height = image.offsetHeight;
        var width = image.offsetWidth;
        ...
        // use height, width to resize image.
    }
</script>

Upvotes: 1

Related Questions