Jquery 使用flexbox分发带边框的填充图形，使图像高度相等

我使用jquery将包装器div的flex grow值设置为图形图像的纵横比。这是基于一个建议

但是，当我在图中添加边框和填充物时，图像的高度不再相同。有没有办法在计算中包含边框和填充，以使所有图像具有相同的高度？或者用另一种方法使这些人物图像具有相同的高度

如果从体形css中注释掉边框和填充，则所有体形图像的高度都相等，这一点就变得很明显

编辑：我刚刚意识到这在Chrome中有完全不同的行为。在Firefox中几乎没有问题，但在Chrome中，图像的大小完全不同

$（文档）.ready（函数（）{
$（'div.pack'）.css({
“显示”：“flex”
})
.children（）.each（函数（））{
$（this.css）({
“宽度”：“100%”
});
var$img=$（this.find（'img'）；
var aspect=$img[0]。自然宽度/$img[0]。自然高度；
$（此）.wrap（“”）
$img.css({
“宽度”：“100%”，
“高度”：“自动”
})
});
});
图{
填充：4px；
边框：1px实心浅灰色；
保证金：0；
}
div.pack>div:not（：最后一个子项）{
保证金权利：1%；
}

大头字幕在这里大头字幕在这里
标题在这里
标题在这里
这是因为您正在向其中添加另一个包装。不要将数字包装在
s中，它将按预期工作

但是它在非常小的设备上不起作用，因为从包装上看，标题太高了。我建议您使用
@media
查询在手机上全宽显示它们。因为您正在为它们硬编码
样式
属性，所以您需要
！重要信息
应用
@媒体
查询
flex


$（窗口）.on（'load'，function（））{
$（'div.pack'）.children（）.each（function（））{
设img=$（this）.find（'img'）[0]，
asp=img.naturalWidth/img.naturalHeight；
$（this.css）({
flex:asp+“”
})
});
});
图{
填充：4px；
边框：1px实心浅灰色；
保证金：0；
字体：斜体正常14px/正常衬线；
}
div.pack>图：非（：最后一个子项）{
保证金权利：1%；
}
图img{
宽度：100%；
高度：自动；
}
.包{
显示器：flex；
}
@介质（最大宽度：560像素）{
.包{
柔性包装：包装；
}
.pack数字：不是（#duh）{
flex:10自动！重要；
最大宽度：计算（100%-10px）；
利润率：0.10px；
}
}

大头字幕在这里大头字幕在这里
标题在这里
标题在这里
关于在Chrome中开发的想法也很有帮助，谢谢你的补充。