如何防止图片溢出div容器 CSS Grid布局图片溢出修复

你的图片溢出和img-fluid样式无关，核心错误出在Grid布局的区域配置上：

• 你给容器定义的是2列网格：grid-template-columns: 3fr 1fr，网格的列分隔线从左到右编号为1、2、3
• 你给主内容区.main-content设置的grid-area: 1 / 1 / 2 / 3规则，代表主内容从第1条列线开始，到第3条列线结束，直接占满了全部两列的宽度
• 侧边栏虽然被指定放在第二列，但主内容区本身已经覆盖了侧边栏的列位置，属于网格项重叠。由于DOM顺序里主内容在侧边栏前面，侧边栏的半透明背景会盖在主内容上方，看起来就像图片溢出到了侧边栏下方。
• 你之前加的overflow: hidden不生效也符合逻辑：主内容父容器本身宽度就是整行两列的宽度，图片max-width:100%是适配这个全宽父容器，根本没有溢出父容器，自然不会触发裁剪。

只需要修改主内容区的网格定位规则，让它只占据第一列即可，不需要改动图片相关样式：

.content-wrapper .container .main-content {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1; /* 原值为2，修改为1，仅占1列宽度 */
  grid-area: 1 / 1 / 2 / 2; /* 列结束值从3改为2，主内容仅覆盖第一列范围 */
}

修改后主内容占据3fr宽度的第一列，侧边栏占据1fr宽度的第二列，两个网格项不再重叠，图片会自动适配主内容区扣除左侧分享按钮后的剩余宽度，不会再延伸到侧边栏区域，也不需要裁剪图片。

为了避免flex布局下内容默认最小宽度导致的偶发溢出问题，可以给图片父容器加一行规则：

.content-wrapper .container .main-content .post-content .post-content-top .post-featured-image {
  overflow: hidden;
  min-width: 0; /* 重置flex项默认最小宽度，允许容器收缩到比内容宽度更小 */
}

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