数据库存储HTML渲染异常：figure样式未生效，图片显示原尺寸

这个问题我之前处理富文本渲染时也碰到过！核心原因是 <figure> 标签的宽度设置并没有自动传递给内部的 <img> 元素——img 默认会以自身的原始宽高显示，不会主动适配父容器的宽度限制。

下面给你几个可行的解决方案：

• 强制图片填满figure容器：给 <img> 添加 width:100%; height:auto; 的内联样式，让图片完全继承figure的宽度，同时保持宽高比避免变形：

<body>
  <figure style="width:50%;">
    <img src="https://picsum.photos/id/237/800/300" style="width:100%; height:auto;">
  </figure>
</body>

• 更灵活的响应式适配：如果需要兼顾不同尺寸的容器，推荐用 max-width:100%; 替代固定width。这样当figure宽度大于图片原始宽度时，图片会保持原始尺寸；当figure宽度更小时，图片会自动缩小适配：

<body>
  <figure style="width:50%;">
    <img src="https://picsum.photos/id/237/800/300" style="max-width:100%; height:auto;">
  </figure>
</body>

• 排查样式冲突：如果上面的方法还是不生效，建议打开浏览器开发者工具（按F12），选中img元素查看「计算样式」面板，看看是否有全局CSS规则（比如设置了 img { width: 800px !important; }）覆盖了你的内联样式，这种情况需要调整样式优先级或者修改全局规则。

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