HTML/CSS新手作业求助：图片无法适配表格单元格问题

嘿，作为HTML/CSS新手碰到这个问题真的太常见啦！我来帮你快速搞定它～

核心原因 #

表格单元格默认不会主动约束内部图片的尺寸，哪怕你手动调整了图片的宽高，也可能因为表格布局的特性导致图片“跑出去”。下面是几个简单有效的解决方案：

方案1：让图片自适应单元格宽度 #

给图片添加CSS样式，强制它的最大宽度不超过父容器（也就是表格单元格），同时保持宽高比例不变：

/* 全局表格内的图片都生效 */
table img {
  max-width: 100%;
  height: auto;
}

• max-width: 100%：图片宽度最多占满单元格的宽度，不会超出
• height: auto：自动计算高度，避免图片拉伸变形

如果只需要针对你代码里的.section1区域生效，可以改成：

.section1 table img {
  max-width: 100%;
  height: auto;
}

方案2：固定表格布局，强化约束 #

如果方案1效果不够，还可以给表格设置固定布局，让单元格宽度更稳定：

table {
  table-layout: fixed; /* 固定表格布局，单元格宽度由表格或单元格本身决定 */
  width: 100%; /* 让表格占满父容器宽度 */
}

td {
  overflow: hidden; /* 可选：如果图片还是超出，隐藏超出部分 */
}

这个方法能避免表格因为内容（比如图片）而自动撑宽，让单元格尺寸更可控。

注意事项 #

• 不要给图片设置固定的width和height（比如<img width="500" height="300">），这种硬编码的尺寸会让图片无法自适应单元格，优先用CSS的max-width和height:auto
• 检查表格有没有设置border-collapse或者其他影响布局的样式，确保单元格没有额外的内边距或边框导致空间不足

试试这些方法，应该就能解决你的图片溢出问题啦！

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