Ответственный размер swfobject?

Question

Я встроил этот интерактивный плакат (http://www.mikesmithdesign.co.uk/images/posterforscreen.swf) в html-страницу, но у меня проблемы с настройкой его размера. Я работаю с бутстрапом и хочу, чтобы контент был отзывчивым, но на данный момент он выглядит очень маленьким, посередине столбца, и я не могу заставить его заполнить всю ширину. Я пробовал устанавливать ширину и высоту до 100 % или используя класс «img-отзывчивый», но ничего не работает. Вот мой код из головы:

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

Пожалуйста, простите любой грязный код или плохую практику, мой backgr Ound в дизайне для печати, и все это веб-материал для меня немного нова.

Answer 1

Чтобы исправить 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> 

Надежда что может помочь.