将 html 元素渲染到浏览器视口

Question

这可能超出了本网站的范围，但我正在尝试弄清楚这个页面：http://www.borngroup.com/ 是如何渲染大猩猩动画的，它会在其中扩展宽度/高度 div 到浏览器视口；然后您可以向下滚动并查看其余页面内容。

我一直在尝试使用 jQuery 来获取浏览器视口的高度和宽度，然后相应地设置 CSS 元素的 width/height 属性；这是一个悲惨的失败。然后我想到了使用 css 渲染 DOM 中的单个元素并隐藏其余部分，然后使用 JavaScript 检测鼠标向下滚动，然后使其余部分站点可见。但是，那也不起作用。 ):

Answer 1

为您编写的代码。完全响应，adiust width/height 可设置的最小值。它基于 window width to video width 和 window height to video height 比率。垂直和水平自动居中。

JSFiddle

JS:

$(document).ready(function (){

    $(window).on('resize', function (){

        var windowWidth = $(window).innerWidth();
        var windowHeight = $(window).innerHeight();
        var videoWidth = $('#video-container video').outerWidth();
        var videoHeight = $('#video-container video').outerHeight();
        var widthRatio = windowWidth/videoWidth;
        var heightRatio = windowHeight/videoHeight;

        if((widthRatio > heightRatio) || (widthRatio == heightRatio)){

            $('#video-container video').css({

                'width':    windowWidth,
                'height':   'auto'
            });
        }
        else{

            $('#video-container video').css({

                'width':    'auto',
                'height':   windowHeight
            });
        }

        var newVideoWidth = $('#video-container video').outerWidth();
        var newVideoHeight = $('#video-container video').outerHeight();

        $('#video-container video').css({

            'left':     '0px',
            'top':      '0px'
        });

        if(newVideoWidth > windowWidth){

            $('#video-container video').css('left', ((windowWidth-newVideoWidth)/2)+'px');
        }

        if(newVideoHeight > windowHeight){

            $('#video-container video').css('top', ((windowHeight-newVideoHeight)/2)+'px');
        }
    }).trigger('resize');
});

将 html 元素渲染到浏览器视口

render an html element to the browsers viewport

javascript

jquery

html

css

dom