博客

div元素按比例缩放的实现方法

  • Post author:
  • Post category:其他


[align=center][size=large]div元素按比例缩放的实现方法[/size][/align]

某些场景下，窗口宽度缩放时，使得元素宽度自适应的同时，保证每个元素的宽高比例不变。

[b]1.1利用CSS属性实现——padding-bottom属性[/b]

padding-bottom 有一个特性是当它的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度而不是高度（同 padding-left 和 padding-right 一样）。

1、具体方法：

将元素的 height 设成 0，使得元素的高度等于 padding-bottom；

合理设置 padding-bottom 的值。

<body>
    <div class="box"></div>
</body>

CSS代码：

.box{
    margin: 50px;
    padding-bottom: 50%;
    /*相当于盒子的高度*/    
    width: 25%;
    /*即维持宽高比为1:2*/    
    height: 0;
    border: 1px solid red;
}

当改变body大小时，类为.box的盒子会按宽高比1:2的比例缩小或者放大。

2、说明事项

盒子的高度height 被设成了0，如果为元素设置 overflow:hidden;属性，其里面的文字不会因为超出了元素高度而被隐藏。

根据CSS 2.1规范2，overflow 只会对处于padding edge外面的内容生效，即只有超出了padding区域的内容才会被 overflow 属性隐藏掉。


版权声明：本文为iteye_16353原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。