如何将iframe中的MJPEG摄像头流缩放至容器尺寸？

可以实现缩放，不用修改源页面的前提下，有几种可行方案：

方案一：CSS Transform动态缩放（推荐） #

核心思路是先获取MJPEG页面的原始固定尺寸，再通过计算容器宽度与原始宽度的比例，用transform: scale()让iframe内容适配容器。

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Ustreamer Webcam</title>
  <style>
    .icontainer {
      border: 1px solid red;
      position: relative;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      /* 这里设置摄像头画面的原始宽高比，比如4:3设75%，16:9设56.25% */
      padding-bottom: 75%;
    }

    .icontainer iframe {
      border: 1px solid blue;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: top left; /* 确保缩放从左上角开始，避免偏移 */
    }
  </style>
</head>

<body>
  <div class='icontainer'>
    <iframe src='http://abc.def.com:5001/webcam/?action=stream' allowfullscreen></iframe>
 </div>
 <script>
  const iframe = document.querySelector('.icontainer iframe');
  // 替换成你MJPEG页面的实际固定宽高（比如常见的640x480）
  const originalWidth = 640;
  const originalHeight = 480;

  function adjustScale() {
    const containerWidth = document.querySelector('.icontainer').offsetWidth;
    const scaleRatio = containerWidth / originalWidth;
    
    // 还原iframe原始尺寸后再应用缩放
    iframe.style.width = `${originalWidth}px`;
    iframe.style.height = `${originalHeight}px`;
    iframe.style.transform = `scale(${scaleRatio})`;
  }

  // 页面加载时初始化缩放
  window.addEventListener('load', adjustScale);
  // 窗口大小变化时重新计算比例
  window.addEventListener('resize', adjustScale);
 </script>
</body>
</html>

方案二：CSS Zoom属性（兼容性稍差） #

如果不需要兼容旧版Firefox，可以直接用zoom属性快速缩放iframe，缺点是缩放比例需手动调整或结合JS动态计算：

.icontainer iframe {
  width: 100%;
  height: 100%;
  /* 数值根据容器尺寸和原始画面比例调整 */
  zoom: 0.75;
}

注意事项 #

• 缩放后可能出现轻微模糊，属于像素级缩放的正常现象
• 必须确认MJPEG页面的原始固定尺寸，否则缩放比例会出错
• 如果页面有交互控件（比如对焦按钮），transform缩放不会影响点击区域准确性，zoom在部分浏览器可能存在点击偏移问题

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