使用CSS縮放與寬度+常數成比例的物體元素高度

這是高級別的問題：我有一個適用於16：9視頻的Flash視頻播放器。播放器的總高度由視頻本身加上一些控制。無論整個玩家的身高如何，控件的高度都是恆定的。所以我想要做的是讓玩家用CSS進行比例縮放，使高度滿足公式： y = rx + C，其中x是寬度，r是視頻高度與視頻寬度的比值，C是常數控件的高度。使用CSS縮放與寬度+常數成比例的物體元素高度

我已經工作了的東西，在Webkit的工作，但似乎沒有別的：

#video-container { 
    height: 0px; 
    padding-bottom: 56%; /* proportional scaling */ 
    position:relative; 
    width: 100%; 
} 
#video-container object { 
    height: 100%; 
    padding-bottom: 50px; /* control height */ 
    position: absolute; 
    width: 100%; 
}

在Webkit中，Flash影片將垂直縮放以填充底部填充區域。但在其他所有瀏覽器中，底部填充只是空白區域。

是否有用於縮放正比於寬度加上一些恆定值的元件的高度的唯一CSS-溶液？關於與比例縮放有關的SO有很多問題，但不變的部分是棘手的部分。

來源

2013-01-04 alexp

我不認爲這是可能只是CSS。給我們更多關於你爲什麼要這樣做的特別信息。你在做什麼試圖達到什麼目的？並提供您的HTML也將有所幫助。 –

如果我不在我的手機上，我會提供一個實際的答案，但是在所有瀏覽器中都需要JS來完成這項高級工作。您可以直接以這種方式訪問CSS屬性，並使用有關它們的條件來操作其他屬性。 – casraf

Here is a fiddle that uses slightly different numbers, but is set up to illustrate對於height的「與寬度加一些恆定值成比例」的想法。這是基於你的原始想法，並進行調整。它似乎在IE8 +，Chrome，Firefox中測試得很好。

從本質上講，你需要的代碼大概是這樣的：

#video-container { 
    position:relative; 
    width: 100%; 
    height: 0px; 
    padding-bottom: 56%; /* proportional scaling */ 
    padding-top: 50px; /* add constant */ 
} 

#video-container object { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
}

來源

2013-01-04 17:35:48 ScottS

我已經得到了另一個解決方案的工作，但這很簡單，謝謝。現在似乎很明顯。 – alexp

+1，幫了我很多。 – Utopik

使用CSS縮放與寬度+常數成比例的物體元素高度

回答

相關問題