Skalierung Objektelement Höhe proportional zur Breite + Konstante mit CSS

Question

Hier ist das Problem auf hohem Niveau: Ich habe einen Flash-Video-Player für 16: 9-Video. Die Gesamthöhe des Players wird vom Video selbst plus einigen Steuerelementen eingenommen. Die Höhe der Kontrollen ist unabhängig von der Höhe des gesamten Spielers konstant. Also möchte ich den Player mit CSS skalieren lassen, so dass die Höhe die Gleichung erfüllt: y = rx + C, wobei x die Breite, r das Verhältnis von Videohöhe zu Videobreite und C die Konstante ist Höhe der Kontrollen.

Ich habe etwas herausgearbeitet, die in Webkit funktioniert, aber scheinbar 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, der Flash-Film skaliert vertikal den unteren Polsterbereich zu füllen. In jedem anderen Browser ist das untere Padding jedoch nur ein leerer Platz.

Gibt es eine CSS-Lösung zur Skalierung der Höhe eines Elements proportional zur Breite plus einem konstanten Wert? Es gibt viele Fragen zu SO bezüglich der proportionalen Skalierung, aber der konstante Teil ist der schwierige Teil.

Answer 1

Here is a fiddle that uses slightly different numbers, but is set up to illustrate eine "proportional zur Breite plus etwas konstanter Wert" Idee für die height. Es basiert auf Ihrer ursprünglichen Idee, mit einem Tweak. Es schien gut in IE8 +, Chrome, Firefox zu testen.

Wesentlichen der Code, den Sie benötigen würde, ist dies wahrscheinlich:

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