使用Flexbox布局带边框内边距的figure，实现图片等高

这个问题我之前也碰到过类似的，核心原因是你计算宽高比时没把figure的border和padding纳入考量，再加上不同浏览器对flex布局的细节解析有差异，才导致了图片不等高的情况。下面给你两种可行的解决方案：

方案一：调整JS计算逻辑，纳入border和padding #

我们需要先获取figure的内边距和边框宽度，把这些额外占用的空间从容器尺寸里扣除，再计算实际需要的宽高比。修改后的代码如下：

$(document).ready(function() {
  $('div.pack').css({ "display": "flex" })
  .children().each(function() {
    const $figure = $(this);
    // 获取figure的padding和border数值
    const paddingX = parseInt($figure.css('padding-left')) + parseInt($figure.css('padding-right'));
    const paddingY = parseInt($figure.css('padding-top')) + parseInt($figure.css('padding-bottom'));
    const borderX = parseInt($figure.css('border-left-width')) + parseInt($figure.css('border-right-width'));
    const borderY = parseInt($figure.css('border-top-width')) + parseInt($figure.css('border-bottom-width'));
    
    const $img = $figure.find('img');
    // 计算图片原始宽高比，再调整为包含padding和border后的容器比例
    const imgAspect = $img[0].naturalWidth / $img[0].naturalHeight;
    const adjustedAspect = (100 - paddingX - borderX) / ((100 / imgAspect) - paddingY - borderY);
    
    $figure.css({ "width": "100%" });
    $figure.wrap(`<div style="display:flex; flex: 0% ${adjustedAspect} 1;" />`);
    $img.css({ "width": "100%", "height": "auto" });
  });
});

对应的CSS要加上box-sizing: border-box，确保border和padding不会额外撑开元素：

figure {
  padding: 4px;
  border: 1px solid lightgray;
  margin: 0;
  box-sizing: border-box; /* 关键：让border/padding包含在元素宽度内 */
}
div.pack>div:not(:last-child) {
  margin-right: 1%;
}

方案二：用CSS原生aspect-ratio属性（更简洁） #

如果你的项目不需要兼容太老的浏览器（现代浏览器都支持），可以完全抛弃JS，用纯CSS实现等高效果，代码更简洁且跨浏览器表现一致：

div.pack {
  display: flex;
  gap: 1%; /* 替代margin-right，更灵活的间距控制 */
}
figure {
  padding: 4px;
  border: 1px solid lightgray;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
}
figure img {
  width: 100%;
  height: auto;
  aspect-ratio: attr(data-aspect); /* 读取图片自定义属性的宽高比 */
  object-fit: cover; /* 可选：如果图片比例有偏差，保持裁剪不拉伸 */
}

然后给每个img加上自定义属性标注宽高比：

<img src="http://via.placeholder.com/300x300" data-aspect="1/1">
<img src="http://via.placeholder.com/300x500" data-aspect="3/5">
<img src="http://via.placeholder.com/600x150" data-aspect="4/1">

关于Chrome和Firefox差异的说明 #

两种浏览器对flex布局中flex-basis和flex-grow的解析优先级有细微差异：Firefox会更尊重元素的内在尺寸，而Chrome会严格按照flex属性计算。用box-sizing: border-box统一元素尺寸计算逻辑，或者直接用CSS原生aspect-ratio，能有效消除这种跨浏览器差异。

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