Question

我想创建一个基于浏览器视口百分比的动态width和height包含。

我有类似

的东西

<body>
  <div id='wrapper' >
       <img src='test.png'/>
  </div>
</body>

CSS

#wrapper{
   width:80%;
   height:80%;
   margin: 0 auto;
}

我使用百分比width和height的原因是因为我想让wrapper对小屏幕做出响应，所以我无法将其设置为像素。任何人都可以帮我吗？非常感谢！

Answer 1

当我复制你的代码时它运行正常（虽然我将背景改为黑色，所以我可以看到div）。我把一张照片放进去，div也相应地扩大了。所以，我猜你的问题是与img。在一天结束时，以下css为我工作：

#wrapper{
   width:80%;
   height:80%;
   margin: 0 auto;
   background-color: #000;
}

#wrapper img {
    width: 100%;
}

如果你想看一个例子（里面有彩虹猫），请看以下小提琴：http://jsfiddle.net/Q5MGp/。祝你好运！

注意 - 如果要强制高度为100％，则必须确保体高为100％（div的容量或内容大小）。因此，将以下行添加到您的css文件中：

body,html{height:100%;}

这应该对身高有所帮助！