我有一个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
发布于 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)
https://stackoverflow.com/questions/51118781
复制相似问题