html – Internet Explorer – Flexbox Image Ratio
发布时间:2020-12-14 19:34:07 所属栏目:资源 来源:网络整理
导读:以下小提琴在Chrome / Firefox中正确显示图像比例. 然而,在Internet Explorer中,当调整大小以适应其容器时,图像(应为正方形)将保持其在Flexbox布局中的原始高度. http://jsfiddle.net/minlare/knyagjk5/ sectionarticle div class="details" img src="http:/
以下小提琴在Chrome / Firefox中正确显示图像比例.
然而,在Internet Explorer中,当调整大小以适应其容器时,图像(应为正方形)将保持其在Flexbox布局中的原始高度. 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; } 如何防止/修复? 解决方法
其原因是
known documented bug,其中IE10和IE11并不总是保留内在比率.而且,根据@ gaynorvader的评论,它在IE10中的工作原理是,IE10中“flex”的默认值为0 0,而最终的规格为0 1 auto.这意味着在IE10中,您的图像被视为flex-grow:0,如
flexbug 6所述
这里的修复是将您的图像设置为flex:none;按照:http://jsfiddle.net/hexalys/knyagjk5/12/,或在其周围添加一个附加容器.但是如果您不需要,我建议不要将图像弹出项目.在这种情况下,您的文章容器已经是一个flex-item,所以我不认为你需要从.details类中创建另一个嵌套的flex项.这似乎是不必要的 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |