Skalowanie wysokości elementu obiektu proporcjonalna do szerokości + stałej z CSS

Question

Oto problem na wysokim poziomie: Mam odtwarzacz wideo Flash dla filmów 16: 9. Całkowita wysokość odtwarzacza jest pobierana przez sam film plus niektóre kontrolki. Wysokość kontrolek jest stała niezależnie od wysokości gracza. Tak więc chcę mieć skalę gracza z CSS, aby wysokość spełniała równanie: y = rx + C, gdzie x to szerokość, r to stosunek wysokości wideo do szerokości wideo, a C jest stałą wysokość kontroli.

mam wypracowane coś, co działa w Webkit, ale pozornie nic innego:

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

W Webkit, film Flash będzie skalować w pionie, aby wypełnić dolną obszaru dopełnienia. Jednak w każdej innej przeglądarce dolna wyściółka to po prostu pusta przestrzeń.

Czy istnieje rozwiązanie CSS do skalowania wysokości elementu proporcjonalnego do szerokości plus pewna stała wartość? Istnieje wiele pytań dotyczących SO związanych ze skalowaniem proporcjonalnym, ale część stała jest trudna.

Answer 1

Here is a fiddle that uses slightly different numbers, but is set up to illustrate Proporcja "proporcjonalna do szerokości plus pewna stała wartość" dla height. Opiera się na twoim oryginalnym pomyśle, z dopracowaniem. Wydawało się, że testuje się dobrze w IE8 +, Chrome, Firefox.

Zasadniczo kod będzie trzeba to chyba to:

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