确保HTML iframe的高度不超过正方形

Question

我有一个iframe，我希望该iframe可以达到显示屏所需的宽度。我将其放在section中，并将以下内容保存在sass文件中：

iframe
    max-width: 100%

实际宽度，否则由section控制。现在，在非常窄的显示器（例如智能手机）上，这可以正常工作。但是，在这种情况下，iframe的高度变得很疯狂。有没有办法确保物体的高度不会变得大于宽度？也就是说，有没有办法访问100%的实际宽度？我希望我可以做这样的事情

iframe
    max-width: 100%
    max-height: max-width

编辑：

请在此处查看工作示例：

http://jsfiddle.net/ptzyjmb1/5/

注意第一个嵌入对象的宽度比正方形宽。第二个是关于正方形的。最后一个比正方形高。我只想为max-height使用一些选项，以使第三个对象（“高”视频）为正方形。也就是说，我希望能够将宽度设置为我（或显示器）想要的宽度，并且高度将不允许超过该值。

我不想强制执行height = width，而只是强制执行height <= width

Answer 1

使用vh和vw属性（视图高度和视图宽度）：

iframe {
    max-width: 100vw;
    max-height: 100vw;
}

如果，如@Anonymous所指出的那样，iframe是某个父元素的子元素，其宽度不超过100vw，则可以使用div的宽度作为iframe的宽度：

div {
    width: 50%
}
div iframe {
    max-width: 50vw;
    max-height: 50vw;        

如果父div的宽度不断变化，则可能正在使用某些JS。如果父元素的宽度按应变量表示，那么JQuery可以按如下所示解决问题：

setInterval(function() {$("div iframe").css("max-width",String(divwidth)+"vw");, 10)