jquery - 如何缩放 div 内容等于浏览器窗口

Question

我正在处理客户想要的特殊情况。过去，我们都知道 Flash 的优势，只需简单地给出文件width的 s 和heights 就可以轻松地放大和缩小内容。

这正是我想用 div-wrapper 做的事情。如图所示，这类似于进入页面。我想要归档的是，如果浏览器窗口缩放所有正方形保持相同的纵横比并且变得更小或更大。

假设我使用带有背景图像的 div 并且标记是这样的：

<body>
 <div id="wrapper">
  <div id="pic1"></div>
  <div id="pic2"></div>
  <!-- and so on -->
 </div>
</body>

有什么css或jquery解决方案可以使这成为可能吗？非常感谢任何提示。谢谢

score 3 · Accepted Answer

您可以通过 Javascript 或 CSS 执行此操作。但是，对于文本调整，我建议您通过 Javascript 进行，但如果您需要完全的浏览器兼容性并确保有效性，您应该依赖插件来很好地控制您正在做的事情（在没有它们的情况下构建它会消耗不必要的时间） .

通过 CSS，您可以将图像width和height百分比归因relative于身体的总大小。

例如：JSfiddle

html, body{
   width:100%;
   height:100%;
}
img{
   position:relative;
   width:50%;
   height:100%;
}

通过 Javascript，您可以从各种插件中进行选择，例如：

有关更多详细信息，请查看：

score 0 · Accepted Answer

你根本不需要 JS。一切都只是 CSS

#wrapper,.flexbox img {
    width: 100%;    
}
.flexbox {
    width: 33.3%;
    float: left;
}

有关详细信息，请参阅http://jsfiddle.net/RHK8P/3 。

编辑：根据你的图片，每行有 3 张图片，所以我将 flexbox 更新为 33.3%。

score 0 · Accepted Answer

给每个图片 div 一个类pic_class，该类设置了灵活的 % 宽度和高度值。css 文件中的内容如下：.pic_class{width:33%; height: 33%}

score 0 · Accepted Answer

您可以使用 CSS 或 jQuery 来实现：

CSS

html,body {
    height: 100%;
}
#wrapper{
    width: 100%;
    height: 100%;
}

活生生的例子：http: //jsfiddle.net/ASfUk/ jQuery

var windowsWidtdh = $(window).width();
var windowsHeight = $(window).height();
$('#wrapper').css('width', windowsWith + 'px');
$('#wrapper').css('height', windowsHeight + 'px');

jquery - 如何缩放 div 内容等于浏览器窗口

4 回答 4

Related

Reference