变换:缩放-处理初始大小的剩余“边距" [英] transform: scale - dealing with remaining 'margin' of initial size

问题描述

我正在使用iframe元素作为混合视频和图像内容的预览窗口.缩小的iframe效果很好，因为它使我们的客户可以观看与其在电视屏幕上显示的图像接近的图像.

I'm using an iframe element as a preview window for mixed video and image content. A scaled down iframe works well, as it allows our clients to view an image close to how it would appear on their TV screen.

我想在iframe下方添加一些按钮，但是该按钮显示在iframe下方，与iframe的未缩放尺寸一致.

I want to add some buttons below the iframe, however the button appears well below the iframe, conforming to the unscaled size of the iframe.

处理原始边距空间的最佳方法是什么?

What is the best method for dealing with the original margin space?

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>

推荐答案

基于相同的因素和< iframe> 的尺寸，使用包装器限制文档流中的占用空间:

Use a wrapper to limit the occupied space in document flow, based on same factor and the <iframe>'s dimensions:

#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> 应用正确的scale + trimming，只要后者具有 data-scale 属性:

Here's an example, in vanilla, to read the attributes from markup and apply correct scale + trimming to any <iframe> inside a <scale-factor>, as long as the latter has a data-scale attribute:

/* 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简明扼要的是:

Its slightly more concise jQuery equivalent is:

$(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
      })
    }
  });
}

这篇关于变换:缩放-处理初始大小的剩余“边距"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！