У меня есть сайт с фиксированным соотношением сторон примерно16:9 пейзаж, как видео.

Я хочу, чтобы он был центрирован и расширен, чтобы заполнить доступную ширину и доступную высоту, но никогда не увеличиваться с обеих сторон.

Например:

Высокая и тонкая страница будет иметь содержимое, растягивающееся на всю ширину при сохранении пропорциональной высоты.Короткая широкая страница будет иметь содержимое, растягивающееся на всю высоту с пропорциональной шириной.

Есть два метода, которые ясмотрю на:

Используйте изображение с правильным соотношением сторон, чтобы расширить контейнерdiv, но я не могзаставить его вести себя одинаково во всех основных браузерах.Установка пропорционального нижнего отступа, но это работает только относительно ширины и игнорирует высоту. Он просто увеличивается с шириной и отображает вертикальные полосы прокрутки.

Я знаю, что вы могли бы сделать это с JS довольно легко, но яМне нравится чистое решение CSS.

Есть идеи?