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

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

在某些场景中，缩放窗口宽度时，元素的宽度是自适应的，同时确保每个元素的宽高比保持不变.

1.1使用CSS属性实现padding-bottom属性

Padding-bottom具有以下特征: 当其值采用百分比形式时，百分比的基数是其所在元素的父元素的宽度html页面按比例缩放，而不是高度（与padding-left和右填充）.

1. 具体方法:

将元素的高度设置为0，以使元素的高度等于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;
}

更改主体尺寸时，.box类的框将按照1: 2的纵横比缩小或放大.

2. 说明

框的高度设置为0. 为元素设置了属性，由于其中的文本超过了元素的高度html页面按比例缩放，因此不会被隐藏.

根据CSS 2.1规范2，溢出将仅对填充边缘之外的内容生效，即，只有超出填充区域的内容才会被溢出属性隐藏.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-173865-1.html