Масштабирование высоты элемента объекта пропорционально ширине + константа с помощью CSS

Вот проблема на высоком уровне: у меня есть Flash-видеоплеер для видео 16: 9. Общая высота игрока учитывается самим видео и некоторыми элементами управления. Высота элементов управления постоянна независимо от высоты всего игрока. Итак, что я хочу сделать, это иметь масштаб игрока с CSS, чтобы высота удовлетворяла уравнению: y = rx + C, где x - ширина, r - отношение высоты видео к ширине видео, а C - постоянная высота элементов управления.

Я разработал что-то, что работает в Webkit, но, похоже, ничего другого:

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

В Webkit Flash-ролик будет масштабироваться по вертикали, чтобы заполнить нижнюю область заполнения. В любом другом браузере нижнее заполнение - это просто пустое пространство.

Есть ли решение только для CSS для масштабирования высоты элемента, пропорционального ширине плюс некоторое постоянное значение? Есть много вопросов о SO, связанных с пропорциональным масштабированием, но постоянная часть - сложная часть.

ОТВЕТЫ

Ответ 1

Вот скрипка, которая использует несколько разные цифры, но настроена для иллюстрации идеи "пропорционально ширине плюс некоторое постоянное значение" для height. Он основан на вашей оригинальной идее, с настройкой. Казалось, что он отлично работает в IE8 +, Chrome, Firefox.

По существу, код, который вам нужен, вероятно, таков:

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