如何实现响应式iFrame？解决内容（含图片）无法适配问题

针对你遇到的iframe内图片超出容器的问题，有两种直接可行的解决办法：

方案一：在生成的HTML中注入全局样式（推荐） #

直接在从数据库获取的HTML内容前添加全局样式，强制所有图片自适应iframe宽度，同时保持比例：

修改Script.js中MessageHTML的赋值部分：

let MessageHTML = `
<style>
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto; /* 可选：让图片居中 */
  }
</style>
${news.Message}
`;

这样生成的Blob HTML会自带样式，所有图片都会自动适配iframe的宽度，不会超出容器。!important用来覆盖图片可能带有的内联宽高样式。

方案二：iframe加载完成后修改图片样式 #

利用现有的iframe加载事件，在内容渲染完成后遍历所有图片并设置样式：

修改Script.js中的load事件回调：

iFrame.on("load", function () {
  const height = iFrame.contents().height();
  iFrame.height(height);

  // 遍历iframe内所有图片，设置自适应样式
  iFrame.contents().find("img").css({
    "max-width": "100%",
    "height": "auto",
    "display": "block"
  });
});

这种方式不需要修改原HTML内容，适合无法直接修改news.Message的场景。

两种方案都能解决图片溢出的问题，根据你的实际需求选择即可。

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