2011-12-22 12 views
6

私はモーションメディアのデザイナーで、クライアント用の作品の一部をクリスマスプレゼント用のウェブサイトに組み込むことを試みています。私はブラウザサイズと一致するように.swfのサイズを変更しようとしています。固定サイズは本当にそうでなければサイズを変更するレイアウトで厄介です。自動リサイズセンタリングされた埋め込みFlash(HTML/CSS)

.swfの幅/高さを "100%"または "auto"に設定するたびに、動画はdivコンテナの下側と下側で切り取られます。コンテナのサイズを100%に変更すると、長くて薄い映画が得られます。下のコードをコピーしましたが、本当にありがとうございます。私のコードについて他のことを批判してもどうでもいい - 私はCSSの処女です。

ありがとうございます! :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function MM_effectAppearFade(targetElement, duration, from, to, toggle) 
{ 
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle}); 
} 
</script> 

<title>Eat, Drink, and Be Mary</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<style type="text/css" media="screen"> 

     body { 
     background:url('images/home.jpg'); 
     background-repeat:no-repeat; 
     background-size:cover; 
     position:absolute; 

     } 

     html, body { 
     height:100%; 
     width:auto; 
     min-width:700; 
     } 

     body { margin:0; padding:0; overflow:hidden; } 


     .swfcontainer { 
      margin-top:3%; 
      width:100%; 
      height:30%; 
      margin-bottom:1px; 
     } 

     .swfcontainersmall { 
      margin-left:10%; 
      height:300px; 
      margin-right:10%; 
     } 

     .flashfile { 
      width:100%; 
      height:100%; 
      text-align:center; 
      margin:2; 
      padding:0; 
      overflow:hidden; 
     } 

     .textcontainer { 
      margin-bottom:3px; 
      margin-top:0; 
      margin-left:0; 
      width:100%; 
      margin-right:0; 
     } 

     .textcontainersmall { 
     margin-top:1px; 
     margin-bottom:1px; 
     margin-left:25%; 
     margin-right:25%; 
     } 

     #flashContent { 
     width:100%; 
     height:100%; 
     } 


     #wrap { min-height: 100%;} 

     #main {overflow:auto; 
     padding-bottom: 150px;} /* must be same height as the footer */ 

     #footer {position: relative; 
     margin-top:-100px; /* negative value of footer height */ 
     height:100px; 
     clear:both; 
     border-bottom:solid 4px #333; 
     } 

     /*Opera Fix*/ 
     body:before { 
     content:""; 
     height:100%; 
     float:left; 
     width:0; 
     margin-top:-32767px;/ 
     } 

</style> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<body> 
<div id="wrap"> 
    <div id="main"> 
     <div class="swfcontainer"> 
      <div class="swfcontainersmall"> 
       <div class="flashfile"> 
        <div id="flashContent"> 


         <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
         codebase="http://fpdownload.macromedia.com/ 
         pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align=                 "middle"> 
         <param name="SRC" value="EatDrinkAndBeMary.swf"> 
         <param name="wmode" value="transparent" /> 
         <param name="SCALE" value="noborder" /> 
         <param name="BGCOLOR" value= /> 
         <embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed> 
</object> 
        </div> 
       </div> 
      </div> 
     </div> 


     <div class="textcontainer"> 
      <div class="textcontainersmall"> 
     <img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" /> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />  
    <div> 
</body> 
</html> 
+1

私はちょうど使用したい[swffit](http://swffit.millermedeiros.com/) - 手で行うよりはるかに簡単です... – ptriek

+0

最新のブラウザではswifitが古くなっていますか? – user1111970

+0

「現代のブラウザをサポートしていますか? 100%確かではありませんが、私が使ってきたサイトはすべてのブラウザで魅力的なように動作しています。 http://www.aorta.be/ – ptriek

答えて

1

これは正しい方向にあなたを指し示すことができます。しかし、yunzenがオンラインの例を指摘しているように、あなたが埋め込んでいる要素を実際に見ることができる場所は素晴らしいでしょう。

<html> 
    <head> 
     <style> 
.menu li { 
    display: inline; 
} 
.menu { 
    float: left; 
    padding: 0; 
    border: solid; 
} 
img { 
    float: left; 
    width: 200px; 
    margin: 0 30px; 
    border: solid; 
} 
#header { 
    margin-left: 20%; 
    margin-right: 20%; 
    padding: 0 5%; 
} 
     </style> 
     <title> 
     </title> 
    </head> 
    <body> 
     <div id="header"> 
      <ul class="menu left"> 
       <li>Elemento 1</li> 
       <li>Elemento 2</li> 
      </ul> 

      <img src="http://www.google.com/logos/2012/steno12-hp.jpg"> 

      <ul class="menu right"> 
       <li>Elemento 3</li> 
       <li>Elemento 4</li> 
      </ul> 
     </div> 
    </body> 
</html> 
2

これは単純に多くのコードです。私は思うスタックオーバーフローの質問のためのmutch。あなたはCSSでreponsiveフラッシュオブジェクトを使用する場合は

あなたはhereを見なければならないか、短いバージョンのhere

CSS:

.embed-wrapper { 
    width: 100%; 
    max-width: YOURMAXWIDTHpx; 
} 
* html .arve-embed-container { 
    margin-bottom: 45px; 
    margin-bot\tom: 0; 
} 

.arve-embed-container { 
    position: relative; 
    padding-bottom: 56.25%; /* 16/9 ratio */ 
    padding-top: 30px; /* IE6 workaround*/ 
    height: 0; 
    overflow: hidden; 
}       

.arce-embed-container div, 
.arve-embed-container iframe, 
.arve-embed-container object, 
.arve-embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

は、そのCSSを取ると、このHTML

<div class="embed-wrapper"> 
<div class="arve-embed-container"> 
<object YOURSTUFF=HERE> 
</object> 
</div> 
</div> 

とあなたは埋め込みラッパーの作業内のすべてを自動的にサイズ変更する必要がありますので、16:9だからあなたはほとんどあなたのコードを取り除き、何かを実装しますこのようなg

1

あなたはhttp://fitvidsjs.com/を見てください。それはあなたが必要とするような音です。フラッシュファイルで

3


設定
Stage.scaleMode = "noScale";

htmlファイル
セットオブジェクトの幅100%

関連する問題