html缩放 iframe页面大小,html – 为响应式设计缩放iframe仅限CSS

解决方案是嵌套的div.我知道,有点hackey,但对于有太多解决方案的问题,这是一个非常简单的解决方案.在此示例中,Youtube视频的宽高比保持为16：9.您的HTML应如下所示：

你的样式表：

#outer{

max-width: 640px;

max-height: 360px;

width: 100%;

height: 100%;

}

#inner{

height: 0px;

padding-bottom: 56.25%;

}

#inner iframe{

width: 100%;

height: 100%;

}

外部div设置最大高度和宽度并允许自身缩放,而内部div使用padding属性将其高度与包含div的宽度相匹配(我很确定).该值应设置为(高度* 100 /宽度)％,高度与宽度的比率. iframe然后伸展以填充整个包含div.空白填充在网络上,所以你应该把文字放在下面.

我不记得我找到它的确切位置.它是在Stack Overflow上的其他地方完成的,但是我认为将它设置为适用于iframe是相关的,因为嵌入式Youtube视频非常常见.