[英]Internet Explorer - Flexbox Image Ratio
The following fiddle shows image ratio correctly in Chrome / Firefox. 以下小提琴在Chrome / Firefox中正确显示图像比率。
However in Internet Explorer the images (which should be square) retain their original height in the flexbox layout when being resized to fit their container. 但是,在Internet Explorer中,当调整大小以适合其容器时,图像(应该是正方形)在flexbox布局中保留其原始高度。
http://jsfiddle.net/minlare/knyagjk5/ http://jsfiddle.net/minlare/knyagjk5/
<section>
<article>
<div class="details">
<img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
<h4>Name</h4>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis.</p>
</div>
</div>
</article>
<article>
<div class="details">
<img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
<h4>Name</h4>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis. Fusce fermentum auctor mauris, auctor lacinia mauris ornare faucibus.</p>
</div>
</div>
</article>
</section>
section{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
article{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
align-items: stretch;
width: 50%;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
.details{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
border: 1px solid #666;
}
.image{
width: 100%;
max-width: 100%;
}
img{
width: 100%;
max-width: 100%;
height: auto;
}
h4{
padding: 10px;
margin-bottom: 0;
}
.description{
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
How can this be prevented / fixed? 如何预防/修复这个问题?
The reason for this is a known documented bug where IE10 and IE11 didn't always preserve intrinsic ratios . 其原因是一个已知的文档错误 ,其中IE10和IE11并不总是保留内在比率 。 And the reason it works in IE10 as per @gaynorvader's comment is that the default value for 'flex' in IE10 was
0 0 auto
rather that the final spec's 0 1 auto
. 根据@ gaynorvader的评论它在IE10中工作的原因是IE10中'flex'的默认值是
0 0 auto
而不是最终规格的0 1 auto
。 Which means that in IE10, your image is seen as flex-grow: 0
as further explained at flexbug 6 这意味着在IE10中,您的图像被视为
flex-grow: 0
如flexbug 6中进一步说明的那样
The fix here is to set your image as flex: none;
这里的修复是将您的图像设置为
flex: none;
as per: http://jsfiddle.net/hexalys/knyagjk5/12/ , or add an additional container around it. 按照: http : //jsfiddle.net/hexalys/knyagjk5/12/ ,或在其周围添加一个额外的容器。 But I'd advise on not making images flex items at all if you don't really need to.
但是如果你真的不需要的话,我建议不要让图像弹性项目。 In this case, your
article
container is already a flex-item so I don't think you need to make another nested flex item out of the .details
class . 在这种情况下,您的
article
容器已经是一个flex项,所以我认为您不需要在.details
类之外创建另一个嵌套的flex项。 That seems unnecessary. 这似乎没必要。
Add one bit of CSS: 添加一点CSS:
img {
min-height: 1px;
}
http://jsfiddle.net/mblase75/3Lb5f8pe/ http://jsfiddle.net/mblase75/3Lb5f8pe/
Honestly, I wish I knew why this works. 老实说,我希望我知道为什么这样做。 In light of hexalys' answer , I suppose this forces IE to recalculate the height/width ratios.
根据hexalys的回答 ,我认为这迫使IE重新计算高度/宽度比。 (In any event, I applied this to my own code just now where the affected element is a label instead of an image; it worked there, too.)
(无论如何,我现在将它应用于我自己的代码,其中受影响的元素是标签而不是图像;它也在那里工作。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.