缩小/仅在网站的可见区域

Question

我正在尝试仅在网站的可见区域实现缩放输出/浏览器（浏览器），就像网站http://halfcreative.themes.bitfade.com/一样。缩小或缩小时，只有可见区域放大或缩小。我用Google搜索但没有找到答案。知道怎么做吗？

Answer 1

你的意思是这个效果？检查演示http://jsfiddle.net/bJnCV/

HTML

<div id="home">
    <h1>Site Name</h1>
    <p>This is slogan</p>
</div>

JQUERY

$(document).ready(function(){
    $('#home').css({'width':$(window).width(),'height':$(window).height()});    
});
$(window).resize(function() {
    $('#home').css({'width':$(window).width(),'height':$(window).height()});
});

Answer 2

看一下网站的CSS。 (min-)height: 100%;是关键字。

header {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #FFF;
  position: absolute;
  background: rgba(0, 0, 0, 0) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  min-width: 100%;
  min-height: 100%;
}