IE 10 вертикально растягивать картинки?

Question

Вот код. Кажется, он работает над этим редактором в stackru... но при рендеринге в ie10 он берет изображение держателя и растягивает его (почти как если бы оно было 200% по высоте и 100% по ширине

<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>

(У меня нет кода на меня в данный момент, чтобы показать).

Я построил что-то с HTML5 и CSS3. Все работает прекрасно, за исключением компьютеров некоторых людей (у всех есть IE10), файлы изображений растягиваются по вертикали?

Это строится для моей компании (внутренняя)... Есть ли причина, по которой это могло бы произойти только в некоторых версиях IE10 для людей?

Спасибо ник

Answer 1

Что меня устроило, так это установив max-width на что-то вроде max-width: 110px;

и после этого ширина:100%;

изображения больше не растягивались

ОБНОВЛЕНИЕ: nvm, это заставило img иметь ширину 0 в Firefox

Answer 2

Пожалуйста, проверьте с CSS, как показано ниже,

img.someClass {max-width: 100%; ширина: авто}