<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9WbnJxMC5wbmcifQ==” alt =“在此处输入图像描述”>我有代码
重要编辑：我的图像尺寸很小，我必须扩展，但无法在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页面中写相同的内容？
这里是仅通过CSS的完整响应式解决方案。
我希望最终能解决您的问题。。
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%;}
您可以尝试如下更改CSS：
.ifrmClass
{
width:100%;
background-color:#fff;
height:100%;
border:none;
padding:0px;
margin:0px;
min-height: 90%;
max-height: 100%;
}