如何为手机调整html5图像的大小

我事先为没有弄清楚如何正确格式化而道歉

我将包含按钮和非常简单的动作脚本的flash swf转换为html5文件。我上传了.html，并使用我在网上找到的iframe代码将其放到我的wordpress网站上：

    <div id="iframewrap"><iframe id="iframeid" name="iframeName" src="test.html" 
height="578" width="110%" frameborder="0" marginwidth="0" marginheight="0" 
scrolling="yes"></iframe></div>

<style type="text/css"><!--#iframewrap { width: 110%; padding: 0px;
top:-25px; position:relative; overflow:hidden;} #iframeid { width:110%;
height:578px; margin:10px 10px 10px 10px; overflow:hidden;} #iframeid
{ -ms-zoom: 0.9; -moz-transform: scale(0.9); -moz-transform-origin: 0 0;
-o-transform: scale(0.9); -o-transform-origin: 0 0; -webkit-transform:
scale(0.9); -webkit-    transform-origin: 0 0;
} --><style>--></style>

-->

它在网站上看起来不错，但对于手机版来说太大了。如果我调整任何比例（将.9更改为.25），它也会影响原始站点。有什么方法可以让我在.9离开原始站点，让移动设备将其更改为.25吗？

可能就是您想要的：

@media screen and ( max-width : 500px ) {
  #iframeid {
    -ms-zoom: 0.25;
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform:scale(0.25);  
  }
}

---

对于响应型iFrame，仍然没有好的解决方案。我很好奇，既然你想要的是一个“响应图像”，为什么你要用iframe而不是简单的

img

标记呢？我把一个swf转换成了一个html5文件，但无法让img标记使用它。iframe最终工作了，所以我只需要将其缩放。@ChrisFerdinandi是否有一种方法可以使用img标记加载此html5图像？我用谷歌swiffy转换了swf。我不知道。如果是视频，你应该使用支持HTML5的视频格式，如果是图像，为什么不使用像jpg、png或gif这样的通用格式？@ChrisFerdinandi它既不是视频也不是图像，它包含按钮和动作脚本。它看起来是几个艺术家的黑白图像，当您将鼠标悬停在每个艺术家的上方时，图像将打开颜色，当您单击转到他们的艺术家页面时。我在wordpress工作，它有时会有很大的局限性，除了移动设备，flash到html5也是我的工作。我尝试了你的建议，它使iframe在移动设备上完全不加载，在计算机上仍然可以正常加载。