CSS grid与flexbox布局中插入图片的规范指引及问题咨询

这个需求完全可以实现，核心问题是你没搞清楚可替换元素（<img>就属于这类）在flex、grid布局下的特殊尺寸计算规则，和普通文本块的规则差异很大。

<img>是自带固有尺寸、固有宽高比的可替换元素，浏览器计算它的尺寸时，默认优先遵循它本身的原始属性，优先级高于flex、grid给子项分配的空间规则。你之前试的max-width:100%、overflow:hidden失效，大多是因为没有配套设置其他约束属性，没有覆盖掉元素的默认尺寸规则。

分两种最常见的使用场景处理即可：

场景1：图片直接作为flex/grid的直接子项 #

直接给图片设置如下CSS属性：

img {
  width: 0;
  height: 0;
  min-width: 100%;
  min-height: 100%;
  /* 按需调整填充模式，避免图片拉伸变形 */
  object-fit: cover;
  object-position: center;
}

原理：把图片的基础宽高设为0，强制让它的实际尺寸由min-width/min-height继承flex/grid分配给子项的空间，完全忽略图片自身的原始尺寸影响，object-fit属性可以保证图片在适配容器尺寸时不会出现拉伸变形。

场景2：图片嵌套在flex/grid的子项容器内部 #

这种情况需要先给外层的子项容器加约束，再设置图片样式：

/* flex/grid的直接子项容器 */
.flex-item, .grid-item {
  overflow: hidden;
  /* 强制子项容器遵守flex/grid分配的尺寸，不会被内容撑开 */
  min-width: 0;
  min-height: 0;
}
/* 容器内部的图片 */
.flex-item img, .grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

原理：flex/grid的子项默认min-width、min-height值为auto，当子项内部包含比分配空间更大的内容时，子项会自动撑开突破预设的布局规则，把这两个值设为0即可强制子项遵守容器分配的空间，再配合图片的宽高100%设置就不会出现溢出问题。

• 不要只给图片加max-width:100%却不约束高度，当父项有固定高度要求时，图片还是会因为原始宽高比撑破容器高度
• 如果用fr单位分配grid列宽，记得给grid容器也加上min-width:0，避免内容撑开容器导致fr的比例分配失效

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