transform: scale - 处理初始大小的剩余“边距”

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> 的尺寸，使用包装器来限制文档流中的占用空间：

#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 */
}

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

这是一个示例，在原版中，从标记中读取属性并对 <scale-factor> 内的任何 <iframe> 应用正确的缩放 + 修剪，只要后者具有 data-scale 属性：

/* 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;
    }
  });
}

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

<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>

---

它更简洁的 jQuery 等价物是：

$(window).on('load', handleScaleFactors)

function handleScaleFactors() {
  $('scale-factor').each(function(i, e) {
    const iframe = $('iframe', e);
    if (iframe.is('iframe')) {
      const w = iframe.attr('width') ? parseInt(iframe.attr('width')) : iframe.width(),
        h = iframe.attr('height') ? parseInt(iframe.attr('height')) : iframe.height(),
        scale = $(e).data('scale') || 0;
      iframe.css({
        transform: 'scale(' + scale + ')'
      });
      $(e).css({
        width: (w * scale) + 'px',
        height: (h * scale) + 'px',
        opacity: 1
      })
    }
  });
}