使用jQuery结合Flexbox实现图片等高布局：火狐与Chrome兼容性问题

这个Chrome的兼容坑我之前踩过！核心问题出在两个地方：一是你给图片包裹的display:flex容器会触发Chrome的默认拉伸行为，二是flex-basis:0%在Chrome和Firefox中的解析逻辑不一致。下面给你一步步解决：

问题根源拆解 #

1. 包裹div的flex容器属性：你给图片套了个display:flex的div，Chrome中flex子项（也就是你的img）默认会继承align-items:stretch，这会强制图片拉伸到包裹div的高度，直接破坏了height:auto的宽高比规则。
2. flex属性的写法差异：flex:0% {aspect} 1里的flex-basis:0%，Chrome会把它解析为容器宽度的0%，而Firefox则更贴近规范的“从0开始按比例分配空间”，导致两者的宽度计算逻辑出现偏差。

修复方案 #

1. 修改jQuery包裹逻辑 #

把包裹div的display:flex改成display:block，同时调整flex属性的写法，用flex: {aspect} 1 0替代原来的格式：

$('div.pack').css({ "display": "flex" })
  .children().each(function() {
    var aspect = this.naturalWidth / this.naturalHeight;
    // 移除display:flex，改用block容器，调整flex属性写法
    $(this).wrap('<div style="display:block; flex: ' + aspect + ' 1 0;" />')
  });

2. 调整父容器和图片的CSS #

给父容器添加align-items:flex-start，避免包裹div被强制拉伸，同时保留图片的宽高比规则：

img { 
  width: 100%; 
  height: auto; /* 关键：保持图片原生宽高比 */
}
div.pack {
  display: flex;
  align-items: flex-start; /* 让包裹div高度由图片内容决定，而非强制拉伸 */
}
div.pack > div:not(:last-child) { 
  margin-right: 2%; 
}

3. 可选：确保图片加载完成后计算宽高比 #

如果页面图片是异步加载的，建议把计算逻辑放在window.load事件里，避免naturalWidth/naturalHeight获取不到的问题：

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

修复原理 #

• 去掉包裹div的display:flex：让图片的height:auto规则正常生效，不再被flex容器的拉伸行为干扰。
• flex: aspect 1 0：用flex-basis:0让浏览器从0开始按宽高比分配宽度，确保Chrome和Firefox的计算逻辑一致，最终所有图片的高度会因为高度=宽度/宽高比自动保持一致。
• align-items:flex-start：避免父容器强制拉伸包裹div的高度，让图片的高度由自身宽高比计算而来，彻底解决拉伸变形问题。

这样修改后，Chrome和Firefox都会表现一致：所有图片填满容器宽度，保持等高且不破坏原有宽高比。

内容的提问来源于stack exchange，提问作者43Tesseracts