admin 管理员组

文章数量: 887006

CSS实现等比例缩放的盒子

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

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

本文标签： CSS实现等比例缩放的盒子

版权声明：本文标题：CSS实现等比例缩放的盒子 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732360565h1535094.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。