Mise à l'échelle de la hauteur des éléments d'un objet proportionnellement à la largeur + constante avec CSS

Question

Voici le problème à un niveau élevé : J'ai un lecteur vidéo Flash pour une vidéo 16:9. La hauteur totale du lecteur est occupée par la vidéo elle-même et quelques contrôles. La hauteur des contrôles est constante, quelle que soit la hauteur totale du lecteur. Je souhaite donc que le lecteur soit mis à l'échelle à l'aide d'une feuille de style en cascade, de sorte que sa hauteur réponde à l'équation suivante : y = rx + C, où x est la largeur, r est le rapport entre la hauteur et la largeur de la vidéo, et C est la hauteur constante des contrôles.

J'ai mis au point quelque chose qui fonctionne dans Webkit, mais apparemment rien d'autre :

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

Dans Webkit, la vidéo Flash est mise à l'échelle verticalement pour remplir la zone de remplissage inférieure. Dans tous les autres navigateurs, cependant, le rembourrage inférieur est simplement un espace vide.

Existe-t-il une solution uniquement en CSS pour mettre à l'échelle la hauteur d'un élément proportionnellement à sa largeur ? plus une certaine valeur constante ? Il y a beaucoup de questions sur SO concernant l'échelle proportionnelle, mais la partie constante est la plus délicate.

Answer 1

Voici un violon qui utilise des nombres légèrement différents, mais qui est configuré pour illustrer une idée de "proportionnel à la largeur plus une certaine valeur constante" pour les height . Il est basé sur votre idée originale, avec une petite modification. Il a semblé être testé correctement dans IE8+, Chrome, Firefox.

Essentiellement, le code dont vous auriez besoin est probablement le suivant :

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