以fullhd然后按比例缩放渲染div内容

Question

电视节目幻灯片，里面有HTML。电视的分辨率是FullHD（1920x1080）。

编辑我想知道的幻灯片时，幻灯片将如何在电视上精确显示。虽然我有一台FullHD显示器，但我从未在全屏模式下在浏览器中工作过。其他可能正在使用幻灯片的人也希望看到幻灯片。

使用另一个词，我需要渲染1920x1080 div，然后按比例缩放它以适合客户端的浏览器。如何使用CSS或JS或jQuery完成？

编辑：我不需要按比例操纵图像。无论客户端的视口分辨率如何，我都需要看看页面在FullHD分辨率上的显示效果

Answer 1

已更新！以下是演示：https://jsfiddle.net/8jxk0atm/4/

旧调整大小1920x1080宽高比演示：https://jsfiddle.net/8jxk0atm/2/

您可以使用1920x1080创建div规范。并把它  // screen zoom out for checking document.body.style.zoom="40%" 在你的js代码之上。

它将缩小您的文档，以便您可以看到它在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();
});