IE 10 vertically stretching images?

Question

heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width

<style>
section`enter code here` {
        padding: 1em;
        text-align: center;
}

.content {
        margin: 0 auto;
        max-width: 1000px;
}

.content > h2 {
        clear: both;
        margin: 0;
        padding: 4em 1% 0;
        color: #484B54;
        font-weight: 800;
        font-size: 1.5em;
}

.content > h2:first-child {
        padding-top: 0em;
}


.grid {
        position: relative;
        margin: 0 auto;
        padding: 1em 0 4em;
        max-width: 1100px;
        list-style: none;
        text-align: center;
}

/* Common style */
.grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 10px 1%;
        min-width: 310px;
        max-width: 310px;
        max-height: 310px;
        width: 48%;
        background: #d30c55;
        text-align: center;
}

.grid figure img {
        position: relative;
        display: block;
                height: 100%;
                width:auto;
        max-height: 100%;
        max-width: 100%;
        opacity: 1;
}

.grid figure figcaption {
        padding: 0em 2em 2em 2em;
        color: #ffffff;
        text-transform: uppercase;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-box-sizing: border-box; 
       box-sizing: border-box;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
        pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {

        z-index: 1000;
        text-indent: 200%;
        white-space: nowrap;
        font-size: 0;
        opacity: 0;
}

.grid figure h2 {
        word-spacing: -0.15em;
        font-weight: 200;
}

.grid figure h2 span {
        font-weight: 400;
}

.grid figure h2,
.grid figure p {
        margin: 0;
}

.grid figure p {
        letter-spacing: 1px;
        font-size: 68.5%;
}


/*---------------*/
/***** transition *****/
/*---------------*/

figure.effect-transition {
        background-color: #a39d99;

}

figure.effect-transition img {
       /* opacity: 0.7; */
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: scale(1);
        transform: scale(1);
}

figure.effect-transition:hover img {
        opacity: 0.1;
        -webkit-transform: scale(1);
        transform: scale(1);
}

figure.effect-transition h2 {
        margin-top: 80%;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
}

figure.effect-transition p {
        margin: 1em 0 0;
        padding: 0.6em;
        border: 1px solid #fff;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,20px,0) scale(1.1);
        transform: translate3d(0,20px,0) scale(1.1);
} 

figure.effect-transition:hover h2 {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,-170px,0);
}

figure.effect-transition:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0) scale(1);
        transform: translate3d(0,-30px,0) scale(1);
}



@media screen and (max-width: 50em) {
        .content {
                padding: 0 10px;
                text-align: center;
        }
        .grid figure {
                display: inline-block;
                float: none;
                margin: 10px auto;
                width: 100%;
        }
}
</style>

<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><a href="#" target="_blank"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /></a> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
<a href="#" target="_blank">View more</a></figcaption></figure>
</div>
</div>
</div>

(I do not have the code on me at this exact moment to show).

I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?

This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?

Thank you, Nick

Answer 1

Please Check with the css as shown below,

img.someClass{ max-width:100%; width:auto }

Answer 2

What did the trick for me was setting a max-width at something like max-width: 110px;

and afterwards a width:100%;

images were nog not stretched anymore

UPDATE: nvm, this caused the img to have a width of 0 on Firefox