html – 为响应式设计缩放iframe仅限CSS

概述许多网站都嵌入了Youtube视频. Youtube现在可以在手机上使用了.如果响应式设计将成为一件事,为什么不应该包含Youtube视频的iframe呢？ 搜索了几天(打开和关闭)后,我找不到一个清晰,简单的问题解决方案(我是HTML / CSS的新手).它很容易扩展iframe宽度,但为了保持相对高度我找到了大量的javascript,jQuery和php,这对于网页设计初学者来说都非常深奥. 许多网站都嵌入了Youtube视频. Youtube现在可以在手机上使用了.如果响应式设计将成为一件事,为什么不应该包含Youtube视频的iframe呢？

搜索了几天(打开和关闭)后,我找不到一个清晰,简单的问题解决方案(我是HTML / CSS的新手).它很容易扩展iframe宽度,但为了保持相对高度我找到了大量的JavaScript,jquery和PHP,这对于网页设计初学者来说都非常深奥.我想要一种缩放iframe高度的简单方法,以便始终保持一定的宽高比,无论宽度如何变化.

为了防止这是一个未解决的问题,方法如下.以下是iframe的初始设置：

<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

而已.

我想知道是否有人也有任何其他解决方案.

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

<div ID="outer">    <div ID="inner">        <iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>    </div></div>

你的样式表：

#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视频非常常见.

Here’s a JSfiddle with the working thing.

总结

以上是内存溢出为你收集整理的html – 为响应式设计缩放iframe仅限CSS全部内容，希望文章能够帮你解决html – 为响应式设计缩放iframe仅限CSS所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。