div元素按比例缩放的实现方法
程序员文章站
2022-07-07 18:14:33
...
div元素按比例缩放的实现方法
某些场景下，窗口宽度缩放时，使得元素宽度自适应的同时，保证每个元素的宽高比例不变。
1.1利用CSS属性实现——padding-bottom属性
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 属性隐藏掉。
上一篇： HTML元素不可见的实现方法详解