Hier ist das Problem auf hohem Niveau: Ich habe einen Flash-Videoplayer für 16: 9-Videos. Die Gesamthöhe des Players wird vom Video selbst sowie einigen Steuerelementen eingenommen. Die Höhe der Bedienelemente ist unabhängig von der Größe des Gesamtspielers konstant. Ich möchte also, dass der Player mit CSS skaliert, sodass die Höhe die folgende Gleichung erfüllt: y = rx + C, wobei x die Breite ist, r das Verhältnis von Videohöhe zu Videobreite ist und C die konstante Höhe ist der Kontrollen.

Ich habe etwas ausgearbeitet, das in Webkit funktioniert, aber anscheinend nichts anderes:

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

In Webkit wird der Flash-Film vertikal skaliert, um den unteren Füllbereich auszufüllen. In jedem anderen Browser ist die untere Polsterung jedoch nur ein leerer Bereich.

Gibt es eine reine CSS-Lösung zum Skalieren der Höhe eines Elements proportional zur Breite?plus einen konstanten Wert? Es gibt viele Fragen zu SO im Zusammenhang mit proportionaler Skalierung, aber der konstante Teil ist der heikle Teil.