0

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

Karthick Nagarajan
  • 1,327
  • 2
  • 15
  • 27
Neka
  • 1,574
  • 4
  • 22
  • 36

1 Answers1

0

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.

enter image description here

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();
});
yeyene
  • 7,297
  • 1
  • 21
  • 29
  • What about inner content? Will it be scaled? – Neka Sep 21 '17 at 07:06
  • 1
    It will base on your html code, if you use responsive and put them inside this div, you can always see the full HD layout. – yeyene Sep 21 '17 at 07:07
  • Or put this code on top of the js file and it will zoom out your html content and you can check how it will look . `// screen zoom out for checking document.body.style.zoom="40%"` – yeyene Sep 21 '17 at 07:13