IE 10 垂直拉伸图像？

Posted 2023-03-10

【中文标题】IE 10 垂直拉伸图像？

【英文标题】：IE 10 vertically stretching images?

【发布时间】：2016-03-20 18:29:10

【问题描述】：

代码如下。它似乎正在***上的这个编辑器上工作......但是当在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  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 版本上发生？

谢谢你， 尼克

【问题讨论】：

你需要发布你的代码，否则任何答案都是猜测

无法在我的 IE10 上重现 .. 如果将 .grid figure 中的 width: 48%; 更改为固定大小怎么办？

还要确保每个人的 Windows 都是最新的......或者这很可能是我的一个理由。

我已将其更改为 100% 并实际上将其完全删除，这似乎没有任何改变。生病将其更改为 310 像素，看看会发生什么。谢谢。

【参考方案1】：

请检查css如下图，

img.someClass 最大宽度：100%； 宽度：自动

【讨论】：

垂直拉伸不是最大高度吗？

不，它会根据容器的宽度取Max-height。这样该图像将被正确缩放。

【参考方案2】：

对我来说，诀窍是将最大宽度设置为类似 最大宽度：110px;

然后是宽度：100%；

图像不再被拉伸

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