我有一个ul > li > a > img
括号,并使用 flexbox 将所有列表项对齐到一行,同时图像保持其宽高比。
Chrome 45 , Firefox 40 , Safari 的内容 8 , Opera 28 &的边线
所以我的问题是我试图在 IE 中实现与 Chrome和Firefox 中相同的行为。
我的 SASS / SCSS
ul.images {
float: left;
clear: both;
width: 100%;
min-height: auto; // Required for Firefox
padding: 0;
margin: 0;
border: 1px solid yellow;
display: -webkit-flex;
-webkit-flex-direction: row;
display: -ms-flexbox;
-ms-flex-direction: row;
display: flex;
flex-direction: row;
li {
border: 2px solid green;
flex: 1 1 auto;
width: auto;
min-width: 0; // Required by Firefox
max-width: 100%;
max-height: auto;
img {
float: left; // Removes phantom margin
width: auto;
max-width: 100%;
height: auto;
max-height: 100px;
}
}
}
对于想要更详细外观的人来说,这是 CodePen 。
答案 0 :(得分:2)
Change the <img>
width from auto to 100%
img {
width: 100%;
max-width: 100%;
height: auto;
max-height: 100px;
}
It seems that's Chrome who doesn't respect standard
答案 1 :(得分:0)
不确定这是否是您想要解决问题的方式,但我已添加
li{
height: 100%
}
以及其他一些事情似乎在这里工作:
编辑:更新了演示,Chrome和IE的比率似乎很好
答案 2 :(得分:0)
我遇到了同样的问题,发现了这个问题,只需将其添加到您的样式表中:
*{
min-height: 0;
min-width: 0;
}
答案 3 :(得分:-1)
最简单的解决方案:添加&#39;溢出:隐藏&#39;上课&#39; .images &#39;
评论者:
是的,伙计们,错过了那个,对不起。 @mathijs,技术上是正确的,但CSS充满了黑客攻击(需要)。例如,考虑一下clearfix hack,它现在看起来很普通。
但在这种情况下,主容器的最大宽度为500px时,如果缩放图像宽度的总和不适合图像容器,则隐藏溢出似乎是最佳选择。这是一种或两种情况。
BTW:Chrome与W3C规格的关系不如FF(DE 42+),我选择开始使用FF进行初始测试,然后在Ch中测试以检测怪癖。我打赌Ch内部隐藏溢出。@Matt,我坚持溢出:隐藏&#39;解决方案,在一个更大的项目中,它是相当微不足道的,并且可以胜任。
我在想,你真的需要 ul / li ??通过对代码的一些重新设计,它变得不那么复杂和简洁,看看:
@Matt再次:显然当他们的容器有一个固定的宽度时,Ch会削减过多的元素数据,就像你的那样,而FF和IE希望你告诉他们该如何处理它(W3C)。 我改变了班级&#39;重新图像&#39;来自&溢出:隐藏&#39; to&#39; overflow-x:scroll; overflow-y:hidden&#39;,现在你可以看到为什么你需要做一些溢出。
问题的根源在于您希望图像很好地对齐 AND 具有适当的缩放比例(就像我一样)。但是得到的图像宽度的总和大于500px(减去边距等),所以类&#39;图像&#39;满溢了。您根本无法将600px放入500px的容器中并保持纵横比。您将不得不做一些切割或删除主容器的宽度约束(删除宽度:500px)。正如我之前所说:或者......或者......
.rew-container {
float: left;
width: 500px;
border: 2px solid black;
padding: 15px
}
.rew-images {
display: flex;
width: 100%;
padding: 0;
margin: 0;
border: 1px solid red;
overflow-x: scroll; overflow-y: hidden
}
.rew-images img {
min-width: 100%;
max-width: 100%;
width: auto;
max-height: 100px
}
.rew-images a {
flex: 1 1;
border: 2px solid green;
max-height: 100px;
}
&#13;
<div class="rew-container">
<div class="rew-images">
<a href="http://4.bp.blogspot.com/-q8j1nkqwHnE/Tsbs1isbCTI/AAAAAAAAAG4/mcWdJwJ5uvE/s1600/armin_van_buuren_%25282%2529_798.jpg" title="armin_van_buuren_%282%29_798.jpg">
<img src="https://tse4.mm.bing.net/th?id=JN.d1jQ4iuFK0%2b4AkstmpzD1A&pid=15.1" alt="armin_van_buuren_%282%29_798.jpg" height="168" width="300">
</a>
<a href="http://thegun2oo5.files.wordpress.com/2010/05/1140_armin_van_buuren.jpg" title="Armin van Buuren – the best Dj’ in the world :X:X:X">
<img src="https://tse3.mm.bing.net/th?id=JN.RTJ8eeB%2bIMptSFcLhGpXQw&pid=15.1" alt="" height="480" width="444">
</a>
<a href="http://thexipiron.files.wordpress.com/2012/01/armin-van-buuren.jpg" title="armin van buuren">
<img src="https://tse2.mm.bing.net/th?id=JN.VkPvTXw%2fPEOMmOcl9smvoQ&pid=15.1" alt="armin van buuren" height="360" width="480">
</a>
<a href="http://fondosdedj.com/wp-content/uploads/images/74/armin-van-buuren.jpg" title="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ...">
<img src="https://tse2.mm.bing.net/th?id=JN.SvQClhGAAGcPYl1U2SZQsA&pid=15.1" alt="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ..." height="315" width="480">
</a>
</div>
</div>
&#13;