水平flexbox画廊图片100%高度适配时容器宽度自适应问题求助

解决方案 #

核心问题是Flex布局子项默认min-width: auto/min-height: auto的特性会优先保留内容原始尺寸，导致父容器不会根据布局动态收缩，图片也无法正确适配父容器尺寸，只需修改两处CSS规则即可解决：

1. 修改图片父容器section的样式 #

给article section新增最小尺寸限制与flex布局属性，避免容器被图片原始尺寸撑开：

article section {
  flex:1 1 auto;
  min-width: 0; /* 覆盖flex子项默认min-width:auto规则，允许容器宽度收缩 */
  min-height: 0; /* 覆盖flex子项默认min-height:auto规则，允许容器高度收缩 */
  display: flex; /* 让内部img可基于容器实际尺寸计算宽高 */
}

2. 修改img标签适配规则 #

让图片完全贴合父容器尺寸，同时保持原始比例：

article img {
  display:block;
  width: 100%;
  height: 100%;
  object-fit:contain;
}

效果说明 #

修改后图片会自动适配section容器的宽高，保持原始比例不会拉伸变形，article卡片宽度也会跟随整体布局动态调整，不会被图片原始尺寸限制。

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