无源码权限下如何强制设置JS脚本返回图片的自定义尺寸

架构老林

2026-8-31

问题说明

现有第三方引入脚本代码如下：

<script src="https://www.annuncigratuiti.net/reva/index.php?section=serve&id=40&keyword=agrigento&output=js"></script>

脚本执行后会自动渲染一张带预设尺寸的图片，无该脚本的源码访问、修改权限，无法直接调整脚本内部定义的图片尺寸参数，需要在不改动脚本源码的前提下，强制为脚本输出的图片设置自定义尺寸。

可落地方案

CSS强制覆写（优先推荐，实现成本最低）
直接写高优先级CSS规则覆盖图片原有尺寸即可，最稳妥的方式是先给脚本标签套一层自定义父容器，避免误选页面其他图片：
```
<div class="resized-ad-wrap">
  <script src="https://www.annuncigratuiti.net/reva/index.php?section=serve&id=40&keyword=agrigento&output=js"></script>
</div>
```
然后写对应CSS规则，加!important保证优先级高于脚本生成的内联样式：
```
/* 自行替换为需要的宽高数值 */
.resized-ad-wrap img {
  width: 320px !important;
  height: 200px !important;
  /* 可选：避免图片拉伸变形，根据需求选cover/contain */
  object-fit: cover;
}
```
这个方案兼容所有场景，不需要额外写JS逻辑，性能开销为0。

MutationObserver动态监听修正（兜底方案）
如果第三方脚本存在定时重写图片样式的逻辑，CSS覆盖被冲掉，可以用DOM监听的方式，一旦检测到图片属性被修改就立刻改回自定义尺寸：

const wrap = document.querySelector('.resized-ad-wrap');
// 自定义目标尺寸
const TARGET_WIDTH = 320;
const TARGET_HEIGHT = 200;

function fixImgSize() {
  wrap.querySelectorAll('img').forEach(img => {
    img.width = TARGET_WIDTH;
    img.height = TARGET_HEIGHT;
    img.style.width = `${TARGET_WIDTH}px`;
    img.style.height = `${TARGET_HEIGHT}px`;
  })
}

const observer = new MutationObserver(fixImgSize);
observer.observe(wrap, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['width', 'height', 'style']
});

// 初始执行一次
fixImgSize();

父容器适配方案（便于维护）
如果后续需要频繁调整尺寸，可以直接给父容器设置固定尺寸，让图片100%适配父容器：
```
.resized-ad-wrap {
  width: 320px;
  height: 200px;
}
.resized-ad-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
```
后续调整尺寸只需要修改父容器的宽高属性即可，不需要改动图片相关规则。

注意：强制修改尺寸仅为前端渲染层面的调整，如果图片原始素材分辨率远小于你设置的目标尺寸，放大后会出现模糊问题，该问题受素材本身限制，无法通过前端代码修复。

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