ऑटो-रीसाइजिंग सेंटर एंबेडेड फ्लैश (एचटीएमएल/सीएसएस)

मैं एक मोशन मीडिया डिजाइनर हूं जो क्लाइंट के लिए अपने क्रिसमस उपहार के लिए वेबसाइट में कुछ काम शामिल करने की कोशिश कर रहा है। मैं ब्राउज़र आकार से मेल खाने के लिए .swf का आकार बदलने का प्रयास कर रहा हूं, क्योंकि निश्चित आकार वास्तव में मेरे अन्य आकार बदलने वाले लेआउट के साथ गड़बड़ कर रहा है।ऑटो-रीसाइजिंग सेंटर एंबेडेड फ्लैश (एचटीएमएल/सीएसएस)

हर बार जब मैं .swf की चौड़ाई/ऊंचाई को "100%" या "ऑटो" पर सेट करता हूं, तो फिल्म div कंटेनरों के नीचे ऊपर और नीचे कट जाती है। जब मैं कंटेनर का आकार 100% में बदलता हूं, तो मुझे एक लंबी, पतली फिल्म मिलती है। मैंने नीचे अपना कोड कॉपी किया है, और मैं वास्तव में आपकी मदद की सराहना करता हूं। मेरे कोड के बारे में कुछ भी आलोचना करने के लिए स्वतंत्र महसूस करें - मैं भी एक सीएसएस कुंवारी हूं।

बहुत बहुत धन्यवाद! :)

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

स्रोत

2011-12-22 user1111970

मैं बस का उपयोग करेंगे [swffit] (http://swffit.millermedeiros.com/) - हाथ से ऐसा करने से कहीं अधिक आसान ... – ptriek

क्या नए ब्राउज़र के लिए पुराना swffit है? – user1111970

आपका मतलब है 'आधुनिक ब्राउज़र का समर्थन करता है'? 100% निश्चित नहीं है, लेकिन सभी साइटों को मैं सभी ब्राउज़रों में एक आकर्षण की तरह काम पर उपयोग कर रहा हूं ... उदाहरण के लिए। http://www.aorta.be/ – ptriek

आशा है कि यह आपको सही दिशा में इंगित कर सकता है। लेकिन जैसा कि यंजन एक ऑनलाइन उदाहरण इंगित करता है, जहां हम वास्तव में उन तत्वों को देख सकते हैं जो आपके एम्बेडिंग हैं।

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

स्रोत

2012-01-13 01:26:23 Darkade

बस बहुत सारे कोड हैं। मुझे लगता है कि एक ढेर overflow सवाल के लिए mutch करने के लिए।

आप सीएसएस के साथ एक reponsive फ़्लैश वस्तु चाहते हैं अपने here दिखना चाहिए या एक छोटा संस्करण के लिए here

सीएसएस:

.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%; 
}

कि सीएसएस लेने के लिए और इस एचटीएमएल

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

साथ आपको एम्बेडेड-रैपर काम के अंदर सब कुछ स्वचालित रूप से आकार बदलना होगा ताकि 16: 9 ताकि आप अपने अधिकांश कोड से छुटकारा पा सकें और somethin को कार्यान्वित कर सकें जी

स्रोत

2012-01-31 14:46:25

आपको http://fitvidsjs.com/ पर एक नज़र रखना चाहिए। ऐसा लगता है जैसे आपको चाहिए।

स्रोत

2012-06-07 21:11:23

फ्लैश फ़ाइल में
सेट
Stage.scaleMode = "noScale";

html फ़ाइल
सेट वस्तु चौड़ाई 100%

स्रोत

2012-11-16 13:06:43 Eric

ऑटो-रीसाइजिंग सेंटर एंबेडेड फ्लैश (एचटीएमएल/सीएसएस)

उत्तर

संबंधित मुद्दे