使用flexbox分发图像，以便使用jquery图像高度相等-Firefox与Chrome行为

Question

我正在使用jquery来计算图像的长宽比，并将其设置为flex-grow值，以使flexbox内的所有图像在填充容器的宽度时都显示相同的高度。

这在Firefox中效果很好，但在Chrome中却有不同的行为。

在Firefox中，所有图像的高度均相同，并保持其纵横比。

在Chrome浏览器中，所有图像的宽度看上去都与Firefox中的宽度相同，但它们在垂直方向上拉伸到了最高像素500px的高度。

如何修复Chrome中的外观？

 $('div.pack').css({ "display": "flex" }) .children().each(function() { var aspect = this.naturalWidth / this.naturalHeight; $(this).wrap('<div style="display:flex; flex: 0% ' + aspect + ' 1;" />') }); 

 img { width: 100%; height: auto; } div.pack > div:not(:last-child) { margin-right: 2%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='pack'> <img src="http://via.placeholder.com/400x150"/> <img src="http://via.placeholder.com/150x500"/> <img src="http://via.placeholder.com/300x300"/> </div> 

Answer 1

您将需要添加align-items: flex-start到div包装器的CSS，否则Chrome会拉伸 img ，因为align-items的默认值就是该stretch 。

我还将速记flex属性的顺序更改为正确的位置

另请注意，基于规格的事实， 对柔性项目使用边距和填充百分比可能会有所不同。 允许它，建议不要这样做。

堆栈片段

 $('div.pack').css({ "display": "flex" }) .children().each(function() { var aspect = this.naturalWidth / this.naturalHeight; $(this).wrap('<div style="display: flex; align-items: flex-start; flex: ' + aspect + ' 1 0%;" />') }); 

 img { width: 100%; height: auto; } div.pack > div:not(:last-child) { margin-right: 2%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='pack'> <img src="http://via.placeholder.com/400x150"/> <img src="http://via.placeholder.com/150x500"/> <img src="http://via.placeholder.com/300x300"/> </div> 

---

另一个选择是简单地删除display: flex div包装器上的display: flex 。

堆栈片段

 $('div.pack').css({ "display": "flex" }) .children().each(function() { var aspect = this.naturalWidth / this.naturalHeight; $(this).wrap('<div style="flex: ' + aspect + ' 1 0%;" />') }); 

 img { width: 100%; height: auto; } div.pack > div:not(:last-child) { margin-right: 2%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='pack'> <img src="http://via.placeholder.com/400x150"/> <img src="http://via.placeholder.com/150x500"/> <img src="http://via.placeholder.com/300x300"/> </div>