缩放如果CSS宽度100%像一幅图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (124)

我想通过css缩放iframewidth: 100%,高度应与宽度成比例地缩放。

带着<img>这很好用。

图像和iframe都在html中定义了宽度和高度。

以下是一些例子:

<html>
    <style>
        #a{ width: 500px; }
        img{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <img src="http://lorempixel.com/200/150/" width="200" height="150" />
        </div>
    </body>

这在图像上非常有用,但我希望iFrames也有相同的行为:

<html>
    <style>
        #a{ width: 900px; background: grey;}
        iframe{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>

IFRAME渲染100%宽,但不缩放它的高度成比例的图像。

提问于
用户回答回答于

我认为这是一种更干净的方法。它适用于内联的“高度”和“宽度”属性和CSS“最大宽度”属性

HTML:

<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>

css:

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%;}
用户回答回答于

图像和IFRAME之间的很大区别是图像保持其纵横比。可以将图像和IFRAME与Will结合在一起,从而得到响应性的IFRAME。希望这能回答你的问题。

HTML:

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <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>

css:

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%;}

注:这只适用于固定的纵横比。

扫码关注云+社区

领取腾讯云代金券