Question

enter image description here 我有代码

重要编辑：我的图片尺寸很小，我必须展开但不能在iframe中为图片应用css。

给出的样式是

 .ifrmClass
        {
            width:100%;
            background-color:#fff;              
            height:100%;              
            border:none;              
            padding:0px;              
            margin:0px;
        }

我可以在调试模式下更改大小。

<html><head><meta name="viewport" content="width=device-width"><title>landingpage.jpg (872×360)</title></head><body style="margin: 0px;"><img style="-webkit-user-select: none;width: 100%;height: 90%;" src="../Images/landingpage.jpg"></body></html>

现在我如何在我的html页面中编写相同内容？

Answer 1

以下是仅通过css的完整响应式解决方案。

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

DEMO

我希望最终解决你的问题..

HTML

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->

    <iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%;background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;"> </iframe>
    </div>
    <p>Resize "result" window to notice the effect.</p>
</div>

CSS

html,body        {height:100%;}
.h_iframe        {position:relative;}
.h_iframe iframe {width:100%; height:100%;}

DEMO

Answer 2

您可以尝试更改CSS，如下所示：

 .ifrmClass
        {
            width:100%;
            background-color:#fff;              
            height:100%;              
            border:none;              
            padding:0px;              
            margin:0px;
            min-height: 90%; 
            max-height: 100%;
        }

Answer 3

以下是Fiddle:

只需将以下代码添加到您的css：

.ifrmClass {
    min-height: 200px; 
    max-height: 500px; 
}

如何在iframe中设置图像的最大宽度

3 个答案: