移动端网页图片溢出容器时如何通过 max-width 属性控制显示

检查图片溢出问题的具体表现

在移动端浏览器中查看页面，当视口宽度较窄时，如果图片的宽度大于其父容器的宽度，图片内容会超出容器边界，导致页面布局错乱或出现滚动条。这种溢出通常表现为图片右侧或底部被切断，或者图片将周围的文字和元素挤开。

打开浏览器开发者工具并切换到移动设备模拟模式，或者直接在手机上查看页面。重点关注包含图片的容器，特别是带有 class 为 photos 的列表和 class 为 feature 的图片。如果发现图片边缘超出了容器范围，说明发生了溢出问题。

在 CSS 文件中找到控制图片样式的代码块，为 img 标签添加 max-width: 100%; 属性。这行代码的作用是限制图片的最大宽度不超过其父容器的宽度。当图片的原始宽度大于容器宽度时，浏览器会自动按比例缩小图片以适应容器，从而避免溢出。

修改 CSS 代码后保存文件并刷新页面。在移动端视口下重新检查图片，此时图片应完全包含在容器内，不再出现切断或挤压周围元素的情况。如果图片原本较小，该属性不会改变其显示大小，只会防止其过大。确保该属性被添加到 img 选择器中，而不是特定的图片类中。

在浏览器中调整窗口大小，模拟从窄屏到宽屏的变化。观察图片在容器内的表现，确认无论视口如何变化，图片都不会超出容器边界。同时检查图片的显示比例是否保持正常，没有出现拉伸变形的情况。如果图片原本是正方形，修复后应保持正方形比例。

使用浏览器开发者工具的元素检查功能，选中图片元素，查看其计算后的样式。确认 max-width 属性的值确实被应用，并且其值等于父容器的宽度。如果父容器宽度变化，图片宽度也应随之变化。如果在宽屏模式下图片仍然溢出，可能需要检查父容器的宽度设置是否正确。

如果添加 max-width: 100% 后图片仍然溢出，需要检查图片的原始尺寸设置。在 HTML 中查看 img 标签的 width 和 height 属性，如果设置了固定的像素值，可能会覆盖 CSS 的限制。移除或修改这些属性，仅依赖 CSS 进行控制。

检查父容器的宽度设置。如果父容器本身没有设置宽度或宽度为 auto，图片可能会尝试占据整个屏幕宽度。确保父容器有明确的宽度限制，或者使用百分比宽度。此外，确认没有其他 CSS 规则覆盖了 max-width 属性，例如使用了 !important 标记。