Swiffy html 作为响应式横幅嵌入

Question

我真的需要一些帮助来将快速的动画嵌入响应式 bootstrap html 页面。我已经尝试过 1. 以多种方式嵌入 iframe，2. 将实际的 html 代码放置在我的页面中，以及 3. 从 flash 导出到 .mov 然后转换为 .mp4 并使用视频标签（我在哪里现在），但我完全不知道如何拉入一个时髦的 html 转换横幅并使其响应。

我想要的只是让我的 html 横幅以与人们期望响应式 header 图片的查看方式类似的方式查看。

我希望它能够响应移动尺寸。
当它达到 400 像素的最大高度时，随着浏览器宽度的扩展，我希望它在包含 div 的外部居中。

有人可以帮忙吗？那里有一些有用的帖子，我发现有人建议在快速容器的 ID 上使用 width:100%，但是，我没有看到实际的横幅是如何被拉进来的，在 html.

有人能帮忙吗？

谢谢

G

Answer 1

在 Swiffy 输出文件中，我确保我有 width: 100%;高度：自动；像这样：

<div id="swiffycontainer" style="width: 100%; height: auto;">
</div>

那么它的大小应该适合您的 iframe 容器，但是您在 bootstrap 框架中设置了样式。

Answer 2

感谢您的帮助，现在已经解决了。是这样的：

HTML 是：

<div class="wrapper">
    <div class="h_iframe">
        <img class="ratio" src="here i placed a blank image background"/>
        <iframe src="this was the link to my swiffy converted html banner" frameborder="0"></iframe>
    </div>
</div>

CSS 是：

.wrapper         {width:100%; max-height:400px; margin:123px auto 0 auto; background:#ad0017}
.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%;}

在 swiffy 转换文件的 html 内：

<div id="swiffycontainer" style="width: 100%; height:100%; max-height:400px!important;">

结果：一个响应迅速的 html5 转换横幅，可缩小到移动设备。当您扩展浏览器宽度时，它会缩放到最大高度 400 像素，然后在浏览器宽度内物理居中。我的动画有红色背景，所以我将 Flash 动画的文档背景颜色与红色相匹配，所以一切都是无缝的。

Swiffy html 作为响应式横幅嵌入

swiffy html embedded as responsive banner

embed

responsive-design

google-swiffy