响应大小的swfobject?

时间:2015-06-20 19:07:36

标签: twitter-bootstrap flash responsive-design swfobject

我已将此互动式海报(http://www.mikesmithdesign.co.uk/images/posterforscreen.swf)嵌入到html页面中,但我无法设置它的大小。我正在使用bootstrap,并希望内容能够响应,但目前它出现的非常小,位于列的中间,我似乎无法让它填满整个宽度。我尝试将宽度和高度设置为100 %或使用“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>

请原谅任何杂乱的代码或不良做法,我的背景是打印设计,所有这些网页对我来说都是新的。

1 个答案:

答案 0 :(得分:0)

要修复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 code:

<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>

希望可以提供帮助。