Question

在调整浏览器窗口大小时，我无法在宽高比上保留'转换比例'属性。例如，如果窗口已调整大小，则具有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/

我想要做的就是在缩放窗口时保持'变换比例'的宽高比。

注意：正如您所看到的，我在维护iframe的宽高比时遇到问题，我无法保持顶部和底部保持原位。

Answer 1

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

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

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

保持iframe的“变换比例”宽高比

1 个答案: