如何将 divs 内容缩放到等于浏览器窗口

我正在搞砸客户想要的特殊情况。过去，我们都知道Flash的优势，只需简单地提供文件的width和height即可轻松扩展和缩小内容。

这正是我想用div 包装器做的。如图所示这类似于输入页面。我想拱的是，如果浏览器窗口缩放，所有方块都保持相同的纵横比并变小或变大。

假设我使用带有背景图像的div，并且标记如下所示：

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

是否有任何css或jquery解决方案使这成为可能？任何提示都非常感谢。谢谢

你可以通过Javascript或CSS来做到这一点。但是，对于文本调整，我建议您通过Javascript进行，但是如果您需要完全的浏览器兼容性和确保有效性，则应依靠插件来很好地控制您正在做的事情（在没有它们的情况下构建它可能会花费不必要的时间）。

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

例如：JSfiddle

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

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

自适应图像
响应式图像
杰奎瑞图片

有关更多详细信息，请查看以下内容：

您应该使用哪种响应式图像解决方案？
选择响应式图像解决方案

为每个图片div 提供一个设置了流体 % 宽度和高度值的类pic_class。css 文件中的内容如下：.pic_class{width:33%; height: 33%}

你可以

用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');

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

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

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

编辑：根据您的图片，每行有 3 张图像，所以我将弹性框更新为 33.3%。

相关内容

最新更新

热门标签：