html - 为 iframe 保持 'transform-scale' 纵横比

Question

在调整浏览器窗口大小时，我无法将“transform-scale”属性保持在纵横比上。例如，如果调整窗口大小，具有 transform-scale 属性的 iframe 将缩放内部内容以适应 iframe 宽度和高度，而不调整任何站点内容的大小。我似乎无法理解如何在不使用 JavaScript 或任何其他库的情况下实现这一目标。这是我在下面想出的:

HTML:

<div>
<iframe id="resize" src="http://www.w3schools.com/" width="100%" height="100%"></iframe>
</div>

CSS:

* {
    margin:0;
    padding:0;
}
div {
    height: 100vw;
    width: 56.25vw;
    /* 100/56.25 = 1.778 */
    background: skyblue;
    max-height: 100vh;
    max-width: 177.78vh;
    /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;
    bottom:0;
    /* vertical center */
    left:0;
    right:0;
    /* horizontal center */
}
iframe {
    -webkit-transform:scale(0.8);
    -moz-transform-scale(0.8);
    -o-transform: scale(0.8);
    -ms-zoom: 0.8;
}

http://jsfiddle.net/rkmyc95e/1/

我要做的就是在缩放窗口时保持“transform-scale”纵横比。

注意:如您所见，我在保持 iframe 的宽高比方面也遇到了问题，我无法保持顶部和底部不变。

Answer 1

您使用的变换比例只是将 iframe 的宽度设置为其宽度的 80%，将 iframe 的高度设置为其高度的 80%。并且不会帮助您保持纵横比。

您在 html 中的 iframe 元素上将 iframe 设置为其父级宽度和高度的 100%。如果删除这两个属性，您会看到一些有趣的东西，这是您可以开始使用的固定纵横比的起点。

要保持 div 或 iframe 的宽高比，请查看 SE 上的常见问题，例如:https://stackoverflow.com/a/10441480/3708223