我使用 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;
}
Fiddle:
#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>的尺寸：
#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>
这是一个普通的示例，用于从标记中读取属性并对任何内容应用正确的缩放+修剪<iframe>里面一个<scale-factor>，只要后者有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
})
}
});
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
