保持 iframe 的“变换比例”纵横比

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