移动端图片容器溢出？检查 max-width 属性
移动端图片容器溢出通常是因为图片宽度超过了其父容器的限制，通过设置 max-width: 100% 可以确保图片自适应缩放。
检查 CSS 中 img 元素的宽度设置
在移动端布局中，图片容器溢出通常是因为图片的宽度被设置为固定值，超过了父容器的可用空间。检查 CSS 文件中 img 元素的样式，确认是否存在 width 属性或百分比宽度设置。如果图片宽度设置为 200px 或其他固定值，在窄屏设备上会导致内容溢出。确保 img 元素的宽度不会超过其父容器的宽度，避免图片撑破布局。
在提供的示例代码中，img 元素被设置为 display: block，这会移除图片底部的默认间距，但并未限制其宽度。如果父容器宽度小于图片宽度，图片会溢出。检查 CSS 中是否有针对 img 的 width 属性设置，特别是在媒体查询中。确保移动端布局下 img 元素的宽度不会超过父容器的限制，以防止溢出。
添加 max-width 属性限制图片宽度
为了防止图片溢出，需要在 CSS 中为 img 元素添加 max-width: 100% 属性。这个属性确保图片的最大宽度不超过其父容器的宽度，从而自适应缩放。在示例代码中，img 元素被添加了 max-width: 100% 属性，这会停止照片从容器中溢出。确保在 CSS 文件中为 img 元素设置 max-width: 100%，以解决移动端布局中的溢出问题。
添加 max-width: 100% 后，图片会根据父容器的宽度自动调整大小，保持比例不变。如果父容器宽度变化，图片也会相应缩放。检查 CSS 文件中是否正确设置了 max-width: 100%，并确保该属性未被其他样式覆盖。通过设置 max-width: 100%，可以确保图片在移动端布局中不会溢出，保持布局的整洁和美观。
验证修复后的显示效果
在浏览器中打开页面，调整窗口宽度以模拟移动端视口。检查图片是否仍然溢出其容器。如果图片宽度小于父容器宽度，且 max-width: 100% 生效，图片应自适应缩放。如果图片仍然溢出，检查是否有其他 CSS 规则覆盖了 max-width 设置，或者父容器宽度是否被错误设置。
使用浏览器开发者工具检查 img 元素的计算样式，确认 max-width 属性是否生效。如果 max-width: 100% 生效，图片宽度应等于父容器宽度。如果图片宽度仍为固定值，说明 max-width 属性未被正确应用。通过逐步验证 CSS 样式和浏览器计算结果，可以确认图片溢出问题是否已解决。
排查其他可能影响图片显示的样式
除了 max-width 属性，其他 CSS 样式也可能影响图片的显示。检查是否有 border、padding 或 margin 属性设置在 img 元素上，这些属性可能会增加图片的总宽度。在示例代码中，img 元素设置了 border: 1px solid black，这会增加图片的宽度。确保这些属性不会导致图片溢出，必要时调整父容器的宽度。
检查父容器的宽度设置，确保父容器有足够的宽度容纳图片。如果父容器宽度被设置为固定值或百分比，且小于图片宽度，会导致溢出。在示例代码中，.feature 类设置了 width: 200px，这可能导致图片溢出。调整父容器的宽度或移除固定宽度设置，确保图片能够自适应缩放。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。