Skalowanie wysokości elementu obiektu proporcjonalnie do szerokości + stała za pomocą CSS
Oto problem na wysokim poziomie: mam odtwarzacz wideo Flash do wideo 16: 9. Całkowitą wysokość odtwarzacza zajmuje sam film plus kilka elementów sterujących. Wysokość elementów sterujących jest stała niezależnie od wysokości całego odtwarzacza. Tak więc chcę, aby skala odtwarzacza z CSS była taka, 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 to stała wysokość kontrolek.
Opracowałem 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 Webkicie film Flash będzie skalowany pionowo, aby wypełnić dolny obszar wypełnienia. W każdej innej przeglądarce dolne wypełnienie to tylko puste miejsce.
Czy istnieje rozwiązanie przeznaczone tylko do CSS do skalowania wysokości elementu proporcjonalnie do szerokościplus pewna stała wartość? Istnieje wiele pytań dotyczących SO związanych ze skalowaniem proporcjonalnym, ale część stała jest trudna.