根據長寬比使Flash文件縮放到div寬度並保持高度

根據父div寬度，我們在Flash文件縮放100％時遇到問題，同時仍然根據其縱橫比保持高度。根據長寬比使Flash文件縮放到div寬度並保持高度

請檢查出的jsfiddle代碼（http://jsfiddle.net/LgegF）或下面的代碼粘貼到一個空的HTML頁：

<!doctype html> 

<html> 
<head> 
    <meta charset="utf-8"> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 

    <script type="text/javascript"> 
     swfobject.embedSWF("http://www.diescon.net/yellowfestival/400x400.swf", "flash-content", "100%", "100%", "9.0.0", '', null, {wmode: 'transparent'}); 
    </script> 

    <style type="text/css"> 
     body { 
      background-color: #ccc; 
      margin: 0; 
     } 
     #container { 
      width: 400px; /* Fixed width according to page template */ 
      height: auto; /* Container height should adapt to the content, we do not want to set a fixed height here */ 
      background-color: pink; /* Background of container */ 
      position: absolute; 
      top: 0; 
      left: 0; 
     } 
     #flash-content { 
      width: 400px; /* Fill the width of the parent, could be fixed but ideally 100% */ 
      height: 100%; /* We want the height of the flash object/flash content to scale according to the aspect ratio of the swf, we do not want to set a fixed height here */ 
     } 

     /* This is what we really want */ 
     #what-we { 
      width: 400px; 
      height: auto; 
      background-color: pink; 
      position: absolute; 
      top: 0; 
      right: 0; 
     } 
     #really-want { 
      width: 100%; 
      height: 400px; /* This is what we really want, but without setting this height fixed */ 
      background-color: yellow; 
     } 
    </style> 
</head> 
    <div id="container"> 
     <div id="flash-content"></div> 
    </div> 
    <div id="what-we"> 
     <div id="really-want"> 
      <span>This is what we really want</span> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-08-06 Calle

看樣子你在找什麼是

width: 100%; 
height: auto;

讓我知道如何解決。

- 布萊恩

來源

2012-08-06 16:09:50 OneChillDude

我已經嘗試了所有這些組合，似乎沒有任何工作:-(我懷疑我需要一些JS檢索的高度，也許是使用包裝的SWF與我可以叫干將，但理想情況下，我想解決它沒有任何這一點。 – Calle 2012-08-07 06:04:20

一併提交Flash容器的CSS高度聲明。 Swf通常會進行縮放（或者您可以在嵌入/ swfobject選項中設置縮放行爲），所以如果您只是限制寬度，swf自身的高度就會相應地縮放。

[編輯：] 工作小提琴（用非常簡陋的SWF嵌入代碼）：http://jsfiddle.net/LgegF/1/ 你注意如何將SWF尺度縮放瀏覽器的時候。 swf頂部和底部的白色是由於對象包含，swfobject或標籤可以控制swf本身如何縮放（縮放模式，對齊，valign等）。你注意到的是，swf如何使用容器的寬度來確定它的大小，即適合寬度和相應地縮放高度。

來源

2012-08-07 06:15:43 kontur

不，這是行不通的。請使用小提琴並自己嘗試。我會看看可以設置的縮放屬性 – Calle 2012-08-07 07:16:15

第一個所有的，你的小提琴不起作用，分開的CSS和JS，不包裹在HTML /身體標籤。其次，瑞士法郎將縮放，包裝不會，因爲它無法知道什麼是瑞士法郎的大小在不管是什麼縮放模式，我都會用一個小工具來更新我的答案來說明。 – kontur 2012-08-07 07:54:09

我的小提琴工作得很好，雖然它不是對照:-)你的解決方案不是我的問題陳述的答案。我們無法在容器上設置固定高度...... – Calle 2012-08-07 08:20:39

我有一個類似的問題，我覺得這個頁面是非常有用的： http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

基於我所學這篇文章，我建議改變你的HTML代碼：

<div id="container"> 
    <div class="videoWrapper"> 
     <div id="flash-content"></div> 
    </div> 
</div>

若再加上改變你的CSS代碼：

.videoWrapper { 
    position: relative; 
    padding-bottom: 100%; /* 1:1 */ 
    padding-top: 0px; 
    height: 0; 
} 
.videoWrapper object, .videoWrapper embed, { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

您可以在這裏看到的結果： http://jsfiddle.net/LgegF/56/

希望得到這個幫助。

PatBriPerso

來源

2013-06-21 21:04:29 PatBriPerso

根據長寬比使Flash文件縮放到div寬度並保持高度

回答

相關問題