响应大小的 swfobject？

Question

我已将此交互式海报 (http://www.mikesmithdesign.co.uk/images/posterforscreen.swf) 嵌入到 html 页面中，但无法设置它的大小。我正在使用 bootstrap 并希望内容能够响应，但目前它出现在列中间非常小，我似乎无法让它填满整个 width.I 已尝试将宽度和高度设置为 100% 或使用 class "img-responsive" 但似乎没有任何效果。这是我的代码：

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <script type="text/javascript" src="swfobject.js"></script>
      <script type="text/javascript">
         swfobject.registerObject("myFlashContent", "9.0.0");
      </script>

以及正文中的代码（忽略未闭合的 div 标签，因为这只是代码片段，并非全部）

<div class="col-md-8 col-md-offset-1 visible-md visible-lg" id="mainContent">
  <img src="images/typesketch.jpg" alt="Typographic Development Sketches" class="img-responsive propersize" />
  <br />
  <br />
  <div>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="myFlashContent">
      <param name="movie" value="posterforscreen.swf">
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="posterforscreen.swf" class="propersize">
        <!--<![endif]-->
        <a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
        <!-- [if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>

请原谅任何混乱的代码或不良做法，我的背景是印刷设计，所有这些网络内容对我来说都有点新鲜。

Answer 1

要修复您的 Flash 对象的 height，您可以根据页面大小使用图像的 height，这给我们：

CSS代码：

<style>

    @media (min-width: 1200px) {
        .flash_container {
            height: 499px;
        }
    }

    /* Landscape tablets and medium desktops */
    @media (min-width: 992px) and (max-width: 1199px) {
        .flash_container {
            height: 410px;
        }
    }

    /* we don't need all these presets 
       because you are showing an image 
       instead of the flash object 
    */

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {}

    /* Landscape phones and portrait tablets */
    @media (max-width: 767px) {}

    /* Portrait phones and smaller */
    @media (max-width: 480px) {}

</style>

HTML代码：

<div class="img-responsive propersize flash_container">  
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="myFlashContent" width="100%" height="100%">
        <param name="movie" value="posterforscreen.swf">
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="posterforscreen.swf" width="100%" height="100%">
        <!--<![endif]-->
        <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a>
        <!-- [if !IE]>-->
        </object>
        <!--<![endif]-->
    </object>
</div>

希望能帮到你。

响应大小的 swfobject？

Responsive sized swfobject?

flash

swfobject

responsive-design

twitter-bootstrap