javascript - 以全高清然后按比例缩放呈现div内容

电视节目幻灯片，其中包含HTML。电视的分辨率为FullHD（1920x1080）。

编辑我想知道的幻灯片时，幻灯片将如何在电视上准确显示。尽管我有FullHD监视器，但是我从未在全屏模式下使用浏览器。可能正在使用幻灯片的其他人也希望照看幻灯片。

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

编辑：我不需要按比例操作图像。无论客户端的视口分辨率如何，我都需要查看页面在FullHD分辨率下的外观

最佳答案

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

旧尺寸调整为1920x1080的宽高比演示：https://jsfiddle.net/8jxk0atm/2/

您可以使用1920x1080创建div规格。并把这个
 // screen zoom out for checkingdocument.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();
});