DIV包裹带标题图片在移动端超出视口的适配问题求助

问题根源是你给包裹图片的DIV设置了固定宽度600px，当移动端视口宽度小于600px时，容器无法自适应收缩，直接超出视口范围，和margin:auto无关。以下是具体修复方案：

核心修改步骤 #

• 替换固定宽度为动态最大宽度：将width: 600px改为max-width: min(600px, 100%)，这样容器在桌面端最多占600px宽度，移动端自动适配视口宽度
• 给图片添加自适应规则：确保图片不会超出容器范围，避免图片本身溢出

修改后的代码片段 #

<div style="margin: 0px auto; max-width: min(600px, 100%); padding: 15px; border: 1px solid black; text-align: center;">
  <img src="https://crazydogliving.com/wp-content/uploads/2023/01/Delilah_collage_1.jpg" style="max-width:100%; height:auto;" />
  <strong>First Christmas one year later. Nap time!</strong>
</div>

额外注意事项 #

• 如果DIVI主题的全局样式覆盖了自定义样式，可以给max-width和图片样式添加!important（仅在必要时使用）
• 避免给图片或容器设置固定高度，保持height:auto确保图片比例不变

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