如何实现一个等比例缩放的盒子：
众所周知，对于一个img元素而言，当你没有指定它的高度height时，它会默认根据它的宽度width等比例缩放其自身大小，而如果换成其它元素则不行，例如div元素，当你调整它的宽度时，它的高度依然会保持原来大小，并不会实现等比例效果，这是因为img在元素分类中属于replaced（被替换的）元素，这种类型表示这个元素内容的显示不是由CSS控制的，换句话说，对于img元素而言，图片的内容并不是由CSS定义的，而是通过其src属性指向的资源决定的，那如何实现一个普通元素也能有等比例缩放的效果呢？答案是使用padding-bottom属性（JS不在讨论范畴）
padding-bottom有一个非常重要的特性，即当它的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度，而不是高度（同padding-left和padding-right一样），则具体的解决方案是：将元素的高度height设为0，使其高度等于该元素的padding-bottom，再合理设置该元素padding-bottom的值
例子：
<body><div></div><div></div><div></div><div></div></body>
将其每个div的宽度设为25%，高度设为0，让其左浮动，padding-bottom的值设为25%（即父元素body的宽度的25%），这样便成为了四个水平方向排列的正方形，并且在你改变浏览器窗口大小时，同样会等比例缩放
5938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
