Question

我正在弄乱客户想要的特殊情况。回到过去，我们都知道Flash的优点，只需简单地提供文件的width和height，就可以非常简单地扩展和缩小。

这正是我想用div-wrapper做的事情。如此picture 所示这与输入页面类似。我想要的是，如果浏览器窗口缩放所有正方形，保持相同的宽高比并变得更小或更大。

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

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

是否有任何css或jquery解决方案可以实现这一目标？任何提示都非常感谢。感谢

Answer 1

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

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

例如： JSfiddle

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

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

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

Answer 2

为每个图片div分配一个具有流量％宽度和高度值的类pic_class。 css文件中的内容如：.pic_class{width:33%; height: 33%}

Answer 3

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

Answer 4

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

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

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

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

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

4 个答案: