所有网页内容的比例缩放和居中，最大尺寸

Question

我需要一个按比例缩放的应用程序（比如电视而不是网络），并在调整窗口大小时保持内容居中。

我想将我的应用程序布局在宽屏框16：9（1200px x 675px）中。当窗口大于此值时，内容按比例缩放，当内容缩小时。我希望缩放适用于图像，文本，svg和HTML5视频容器。我可以将解决方案仅限于现代浏览器。

我有一个CSS翻译和转换游戏，但缩放行为相当奇怪。请参阅此fiddle。

HTML

<div id='container'>
            <h1>H1</h1>
            <h2>H2</h2>
            <p>P</p>
</div>

CSS

    #container {
        background-color: #7F3;
        font-size: 60px;
        position: absolute;
        width : 1200px;
        height : 675px;
        top: 50%;
        left : 50%;
        /*transform: translate(-50%, -50%);*/
        transform-origin: center center;
    }

JAVASCRIPT

$(window).resize(function(){
    var W = $(window).width()
    var MAX_SIZE = 1600
    var val = Math.min(W,MAX_SIZE) * / 1200 

    $('#container').css({
        'left' : '50%',
        'right' : '50%',
        'transform': 'scale(' + val + ')' + ' translate(-50%,-50%)',
    })

})

提前致谢。