Ridimensionamento altezza elemento elemento proporzionale alla larghezza + costante con CSS

Question

Ecco il problema ad un livello elevato: ho un lettore video Flash per video 16: 9. L'altezza totale del giocatore è ripresa dal video stesso più alcuni controlli. L'altezza dei controlli è costante indipendentemente dall'altezza del giocatore in generale. Quindi quello che voglio fare è avere la scala del giocatore con CSS in modo che l'altezza soddisfi l'equazione: y = rx + C, dove x è la larghezza, r è il rapporto tra altezza del video e larghezza del video, e C è la costante altezza dei comandi.

Ho lavorato fuori qualcosa che funziona in Webkit, ma apparentemente nient'altro:

#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, il filmato Flash scalerà in verticale per riempire l'area padding inferiore. In ogni altro browser, tuttavia, il riempimento inferiore è solo uno spazio vuoto.

Esiste una soluzione solo CSS per ridimensionare l'altezza di un elemento proporzionale alla larghezza più un valore costante? Ci sono molte domande su SO relative al ridimensionamento proporzionale, ma la parte costante è la parte difficile.

Answer 1

Here is a fiddle that uses slightly different numbers, but is set up to illustrate un'idea "proporzionale alla larghezza più un valore costante" per height. È basato sulla tua idea originale, con un ritocco. Sembrava testare bene in IE8 +, Chrome, Firefox.

In sostanza, il codice si avrebbe bisogno è probabilmente questo:

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