【问题标题】：Zooming out / In only visible area of website缩小/仅在网站的可见区域中
【发布时间】：2013-06-28 07:07:56
【问题描述】：

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

【问题讨论】：

你能再具体一点吗？使用“缩放”，您的意思是使用浏览器进行缩放吗？
@Andri 是的，正在缩放浏览器。
您的问题不应依赖于外部资源。如果他们重新设计，这个问题将毫无意义（不是现在有意义）。
您的意思是：当您打开页面并放大和缩小时：可见内容保持不变，您看不到比以前更多的内容（只是更小了）？ ^^
这里有一个类似的问题可以帮助你：stackoverflow.com/questions/13886763/…

【解决方案1】：

你是说这个效果？查看DEMOhttp://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()});
});

【讨论】：

【解决方案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%;
}

【讨论】：