您的位置：首页 > Web前端 > CSS

CSS实现等比例缩放的盒子

2016-03-19 10:49 429 查看

如何实现一个等比例缩放的盒子：

众所周知，对于一个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%），这样便成为了四个水平方向排列的正方形，并且在你改变浏览器窗口大小时，同样会等比例缩放

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航