blocks|key|540456|text|图像和iframe的最大区别在于图像保持其纵横比。您可以将图像和iframe与将导致响应式iframe。希望这能回答你的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|540457|检查此链接，例如：http://jsfiddle.net/Masau/7WRHM/|offset|length|540458|HTML：|540459|<div+class="wrapper">
++++<div+class="h_iframe">
++++++++
++++++++<img+class="ratio"+src="http://placehold.it/16x9"/>
++++++++<iframe+src="http://www.youtube.com/embed/WsFWhL4Y84Y"+frameborder="0"+allowfullscreen></iframe>
++++</div>
++++<p>Please+scale+the+"result"+window+to+notice+the+effect.</p>
</div>|code-block|syntax|javascript|540460|CSS：|540461|html,body++++++++{height:100%25;}
.wrapper+++++++++{width:80%25;height:100%25;margin:0+auto;background:#CCC}
.h_iframe++++++++{position:relative;}
.h_iframe+.ratio+{display:block;width:100%25;height:auto;}
.h_iframe+iframe+{position:absolute;top:0;left:0;width:100%25;+height:100%25;}|540462|注意:这只适用于固定的纵横比。|540463|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Masau/7WRHM/^0|0|9|W|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Big difference between an image and an iframe is the fact that an image keeps its aspect-ratio. You could combine an image and an iframe with will result in a responsive iframe.
Hope this answerers your question.</p>

<p>Check this link for example : <a href="http://jsfiddle.net/Masau/7WRHM/" rel="noreferrer">http://jsfiddle.net/Masau/7WRHM/</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="h_iframe"&gt;
        &lt;!-- a transparent image is preferable --&gt;
        &lt;img class="ratio" src="http://placehold.it/16x9"/&gt;
        &lt;iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;p&gt;Please scale the "result" window to notice the effect.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</code></pre>

<p>note: This only works with a fixed aspect-ratio.</p>


blocks|key|540497|text|我想这是一种更干净的方法。它使用内联height和width属性(我在小提琴中设置了随机值来证明这一点)和CSS+max-width属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|540498|HTML：|540499|<div+class="wrapper">
++++<div+class="h_iframe">
++++++++<iframe+height="2"+width="2"+src="http://www.youtube.com/embed/WsFWhL4Y84Y"+frameborder="0"+allowfullscreen></iframe>
++++</div>
++++<p>Please+scale+the+"result"+window+to+notice+the+effect.</p>
</div>|code-block|syntax|javascript|540500|CSS：|540501|html,body++++++++{height:+100%25;}
.wrapper+++++++++{width:+80%25;+max-width:+600px;+height:+100%25;+margin:+0+auto;+background:+#CCC}
.h_iframe++++++++{position:+relative;+padding-top:+56%25;}
.h_iframe+iframe+{position:+absolute;+top:+0;+left:+0;+width:+100%25;+height:+100%25;}|540502|http://jsfiddle.net/7WRHM/1001/|540503|entityMap|0|LINK|mutability|MUTABLE|url^0|I|6|P|5|1L|9|0|0|0|0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|R]]]]

<p>I suppose this is a cleaner approach.
It works with inline <code>height</code> and <code>width</code> properties (I set random value in the fiddle to prove that) and with CSS <code>max-width</code> property.</p>
<p>HTML:</p>
<pre><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;div class=&quot;h_iframe&quot;&gt;
        &lt;iframe height=&quot;2&quot; width=&quot;2&quot; src=&quot;http://www.youtube.com/embed/WsFWhL4Y84Y&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;p&gt;Please scale the &quot;result&quot; window to notice the effect.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>CSS:</p>
<pre><code>html,body        {height: 100%;}
.wrapper         {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
.h_iframe        {position: relative; padding-top: 56%;}
.h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</code></pre>
<p><a href="http://jsfiddle.net/7WRHM/1001/" rel="nofollow noreferrer">http://jsfiddle.net/7WRHM/1001/</a></p>


blocks|key|540565|text|您可以在此处使用视口单位，而不是%25。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|540566|iframe+{
++++max-width:+100vw;
++++max-height:+56.25vw;+/*+height/width+ratio+=+315/560+=+.5625+*/
}|code-block|syntax|javascript|540567|DEMO+(调整大小以查看效果)|offset|length|540568|​|540569|body+{
++margin:+0;
}
.a+{
++max-width:+560px;
++background:+grey;
}
img+{
++width:+100%25;
++height:+auto
}
iframe+{
++max-width:+100vw;
++max-height:+56.25vw;
++/*+315/560+=+.5625+*/
}|540570|<div+class="a">
++<img+src="http://lorempixel.com/560/315/"+width="560"+height="315"+/>
</div>

<div+class="a">
++<iframe+width="560"+height="315"+src="http://www.youtube.com/embed/RksyMaJiD8Y"+frameborder="0"+allowfullscreen></iframe>
</div>|540571|540572|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/danield770/xs8Lnug1/3/^0|0|0|0|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@$I|12|J|13|1|14]]|A|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|Q|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>You could use viewport units here instead of %. Like this:</p>

<pre><code>iframe {
    max-width: 100vw;
    max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}
</code></pre>

<h2><a href="http://jsfiddle.net/danield770/xs8Lnug1/3/" rel="noreferrer">DEMO</a> (Resize to see the effect)</h2>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 0;
}
.a {
  max-width: 560px;
  background: grey;
}
img {
  width: 100%;
  height: auto
}
iframe {
  max-width: 100vw;
  max-height: 56.25vw;
  /* 315/560 = .5625 */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="a"&gt;
  &lt;img src="http://lorempixel.com/560/315/" width="560" height="315" /&gt;
&lt;/div&gt;

&lt;div class="a"&gt;
  &lt;iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|323730|text|我最喜欢这个解决方案。简单，可扩展，响应性强。这里的想法是创建一个零高度的外部div，底部填充设置为视频的纵横比。iframe在宽度和高度上都缩放到100%25，完全填满了外部容器。外部容器会根据宽度自动调整其高度，而内部的iframe也会相应地进行调整。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323731|<div+style="position:relative;+width:100%25;+height:0px;+padding-bottom:56.25%25;">
++++<iframe+style="position:absolute;+left:0;+top:0;+width:100%25;+height:100%25"
++++++++src="http://www.youtube.com/embed/RksyMaJiD8Y">
++++</iframe>
</div>|code-block|syntax|javascript|323732|这里唯一的变量是外部div中的padding值。4:3宽高比视频为75%25，16:9宽高比视频为56.25%25。|323733|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I like this solution best. Simple, scalable, responsive. The idea here is to create a zero-height outer div with bottom padding set to the aspect ratio of the video. The iframe is scaled to 100% in both width and height, completely filling the outer container. The outer container automatically adjusts its height according to its width, and the iframe inside adjusts itself accordingly.</p>

<pre><code>&lt;div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;"&gt;
    &lt;iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
        src="http://www.youtube.com/embed/RksyMaJiD8Y"&gt;
    &lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<p>The only variable here is the padding-bottom value in the outer div. It's 75% for 4:3 aspect ratio videos, and 56.25% for widescreen 16:9 aspect ratio videos.</p>


blocks|key|540670|text|在Weebly的“添加你自己的html”框中，这些解决方案对我来说都不起作用。不知道他们在用代码做什么。但我在https://benmarshall.me/responsive-iframes/找到了这个解决方案，它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|540671|CSS|540672|.iframe-container+{
++overflow:+hidden;
++padding-top:+56.25%25;
++position:+relative;
}

.iframe-container+iframe+{
+++border:+0;
+++height:+100%25;
+++left:+0;
+++position:+absolute;
+++top:+0;
+++width:+100%25;
}

/*+4x3+Aspect+Ratio+*/
.iframe-container-4x3+{
++padding-top:+75%25;
}|code-block|syntax|javascript|540673|HTML|540674|<div+class="iframe-container">
++<iframe+src="https://player.vimeo.com/video/106466360"+allowfullscreen></iframe>
</div>|540675|entityMap|0|LINK|mutability|MUTABLE|url|https://benmarshall.me/responsive-iframes/^0|1J|16|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>None of these solutions worked for me inside a Weebly "add your own html" box.  Not sure what they are doing with their code.  But I found this solution at <a href="https://benmarshall.me/responsive-iframes/" rel="nofollow noreferrer">https://benmarshall.me/responsive-iframes/</a>   and it works perfectly.  </p>

<p>CSS</p>

<pre><code>.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="iframe-container"&gt;
  &lt;iframe src="https://player.vimeo.com/video/106466360" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>


<p>I want to scale an iFrame through CSS to <code>width: 100%</code>, and the height should scale proportionally to the width.</p>

<p>With an <code>&lt;img&gt;</code> tag this works fine.</p>

<p>Both the image and the iFrame have defined width and height in the html.</p>

<p>Here some examples:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;style&gt;
        #a{ width: 500px; }
        img{ width: 100%; height: auto }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div id="a"&gt;
            &lt;img src="http://lorempixel.com/200/150/" width="200" height="150" /&gt;
        &lt;/div&gt;
    &lt;/body&gt;
</code></pre>

<p>This works great on images, but I would like the same behaviour for iFrames:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;style&gt;
        #a{ width: 900px; background: grey;}
        iframe{ width: 100%; height: auto }
    &lt;/style&gt;
    &lt;body&gt;
        &lt;div id="a"&gt;
            &lt;iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
        &lt;/div&gt;
    &lt;/body&gt;
</code></pre>

<p>The iFrame renders 100% wide but does not scale it's height proportional like the image does.</p>


Scale iFrame css width 100% like an image

容器

我想通过CSS缩放一个iFrame到width: 100%，高度应该与宽度成比例缩放。有了<img>标签，就可以很好地工作了。图像和iFrame都在html中定义了宽度和高度。下面是一些例子：<html>    <style>        #a{ width: 500px; }        img{ width: ...

问缩放iFrame css宽度100%类似于图像
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放iFrame css宽度100%类似于图像EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放iFrame css宽度100%类似于图像
EN