Question

我正在使用iframe元素作为混合视频和图像内容的预览窗口。按比例缩小的iframe运行良好，因为它允许我们的客户查看接近其在电视屏幕上显示的图像。

我想在iframe下面添加一些按钮，但按钮显示在iframe下方，符合iframe的未缩放尺寸。

处理原始保证金空间的最佳方法是什么？

HTML：

<iframe id="iframe"  width="1920" height="1080" src="https://jsfiddle.net/" frameBorder="1">  </iframe>
<button id="previewSkip">Skip</button>

CSS：

#iframe {
  -webkit-transform:scale(0.295);
  -moz-transform: scale(0.295);            
  transform-origin: left top;
}

小提琴：

#iframe {
  -webkit-transform: scale(0.295);
  -moz-transform: scale(0.295);
  transform-origin: left top;
}

<iframe id="iframe" width="1920" height="1080" src="https://youtube.com/" frameBorder="1">  </iframe>
<button id="previewSkip">Skip</button>

Answer 1

使用包装器根据相同因子和<iframe>维度限制文档流中的占用空间：

＆＃13;

#iframe {
  transform: scale(0.295);
  transform-origin: left top;
}

scale-factor {
  width: calc(1920px * 0.295);
  height: calc(1080px * 0.295);
  overflow: hidden;
  display: block;
  border: 1px solid red; /* not needed, obviously */
}

＆＃13;

<scale-factor>
  <iframe id="iframe" width="1920" height="1080" src="https://jsfiddle.net/" frameBorder="1">  </iframe>
</scale-factor>
<button id="previewSkip">Skip</button>

＆＃13;

这是一个例子，在vanilla中，从标记中读取属性并将正确的缩放+修剪应用于<iframe>内的任何<scale-factor>，只要后者有{{} 1}}属性：

＆＃13;

data-scale

＆＃13;

/* forEach polyfill */
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

window.onload = handleScaleFactors;

function handleScaleFactors() {
  const scaleFactor = document.querySelectorAll('scale-factor');
  scaleFactor.forEach(function(e,i) {
    const iframe = e.querySelector('iframe');
    if (iframe) {
      const w = iframe.getAttribute('width') ? 
        parseInt(iframe.getAttribute('width')) : 
        iframe.clientWidth,
      h = iframe.getAttribute('height') ? 
        parseInt(iframe.getAttribute('height')) : 
        iframe.clientHeight,
      s = e.getAttribute('data-scale') ? 
        parseFloat(e.getAttribute('data-scale')) : 
        1;
      iframe.style.transform = 'scale(' + s + ')';
      e.style.width = (w * s) + 'px';
      e.style.height = (h * s) + 'px';
      e.style.opacity = 1;
    }
  });
}

＆＃13;

scale-factor {
  display: block;
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s linear;
}
scale-factor iframe {
  transform-origin: 0 0;
}

＆＃13;

它更简洁的jQuery等价物是：

<scale-factor data-scale="0.295">
  <iframe width="1920" height="1080" src="https://jsfiddle.net/" frameBorder="0">  </iframe>
</scale-factor>
<button id="previewSkip">Skip</button>

<scale-factor data-scale="0.708">
  <iframe width="800" height="600" src="https://jsfiddle.net/" frameBorder="0">  </iframe>
</scale-factor>
<button id="previewSkip">Skip</button>

变换：缩放 - 处理初始大小的剩余“边距”

1 个答案: