通过浏览器设置元素的高度，而不会切断内容

Question

我能够通过浏览器确定它的好坏（下面的链接），但是现在唯一的问题是，在较小的屏幕上查看它会切断内容，并且在打开浏览器代理程序的情况下用google chrome刷新页面会切断也是如此。

如何在不切断内容的情况下使背景适合浏览器。

--link-> 如何获得与浏览器分辨率相同高度的元素？

<script type="text/javascript"> 
$(document).ready(function() { 
var height = window.innerHeight; 
$(".bg").css("height", height); }); 
</script>

Answer 1

您可以计算窗口的高度和宽度，而不是使用以下值处理元素：

这是工作的jsFiddle。

var background = $('.wrapper');
function arrange() {
    var windowH = $(window).height();
    var windowW = $(window).width();
    background.css({'height':windowH+'px','width':windowW+'px','background-size':windowW+'px '+windowH+'px'});
}
arrange(); //for setting sizes on load

$(window).resize(function() {arrange();}); //setting size on window resize