确保HTML iframe不会变得比正方形高
确保HTML iframe不会变得比正方形高
提问于 2018-07-01 05:49:47
我有一个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
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-01 06:01:16
使用vh和vw属性(view-height和view-width)：
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)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51118781
复制相关文章
相似问题