CSS-如何让元素尺寸缩小时保持宽高比例一致？

一般情况下，元素的高度与宽度不成比例关系，但是CSS中有一个属性即

padding

对元素宽度存在依存关系。如果一个元素的

padding

属性以百分比形式表示，如：

div{
width: 100px;
padding: 20%;
}

那么

div

最终的padding值为：

100px * 20% = 20px

所以，如果想保持一个元素宽高比例始终一致，可以为这个元素的

:before

伪类设置

padding

，让

padding

撑开元素高度，从而保持比例关系。假如要使得元素长宽一致，可以如下书写：

div：before{
content: '';
display: inline-block;
width: 0.1px;
padding-top: 100%;
}

对于

img

等没有

before

伪类的元素而言，可以在其外边嵌套一个父盒子，设置

padding

值，然后让该元素宽高与父盒子一致即可。

div.father:before{
content: '';
display: inline-block;
width: 0.1px;
padding-top: 100%;
}

div.father img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}