Render div content in fullhd then proportional scale

Question

TV shows slides, that holds HTML inside. TV's resolution is FullHD (1920x1080).

When editing the slide I want to able to know, how slide will exactly be shown on TV. Although I have a FullHD monitor, I've never worked in the browser in fullscreen mode. Other people, which potentially be working with slides, want to see slides as is too.

Using another word, I need to render 1920x1080 div, then proportionally scale it to fit client's browser. How can be this done using CSS or JS, or jQuery?

Edit: I do NOT need to proportional manipulate the image. I need to see how page will look on FullHD resolution regardless of client's viewport resolution

Answer 1

UPDATED!! Here is the demo: https://jsfiddle.net/8jxk0atm/4/

Old resize 1920x1080 aspect ratio demo: https://jsfiddle.net/8jxk0atm/2/

You can create the div spec with 1920x1080. And put this // screen zoom out for checking document.body.style.zoom="40%" on top of your js code.

It will zoom out your document so you can see what it will look on 1920x1080 div.

HTML

<div id="fullscreen"></div>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

#fullscreen {
    width: 1920px;
    height: 1080px;
    background: green;
    color: #fff;
}

JS

// screen zoom out for checking
document.body.style.zoom="40%"

makeFullHD();

function makeFullHD() {
    var value = $(window).outerWidth();
    value *= 1;
    var valueHeight = Math.round((value / 16) * 9);

    $('#vidHeight').text(valueHeight);
    $('#videoBox').css('width', value + 'px').css('height', valueHeight + 'px');
    $('#videoPlayer').css('width', value + 'px');

    $('#fullscreen').css({
        width: value,
        height: valueHeight
    });

    // test
    $('#fullscreen').text('Width:' + value + '\n' + 'Height:' + valueHeight);
}

$(window).resize(function() {
    makeFullHD();
});