Question

继承人的代码。它似乎正在使用stackoverflow上的这个编辑器...但是当在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

请检查css，如下所示，

img.someClass { 最大宽度：100％; 宽度：汽车 }

Answer 2

我的诀窍是设置最大宽度最大宽度：110px;

然后宽度：100％;

图像不再被拉伸了

UPDATE：nvm，这导致img在Firefox上的宽度为0

IE 10垂直拉伸图像？

2 个答案: