css3高度等比例缩放 |css 百分比大小

.box {
width: 100%;
height: 0;
padding-bottom: 56.25%; /*16:9的宽高比例*/
background-color: #ccc;
}

在上面的代码中，设置了宽度为100%、高度为0，并且通过padding-bottom属性设置了padding占据元素高度的比例，以实现等比例缩放。其中，56.25%是16:9的宽高比例所对应的值，可以根据自己需求的宽高比进行计算。

使用等比例缩放能够避免因为图片或者内容宽高比不一致而导致的元素变形的问题。同时，也能够使响应式布局更加流畅。通过对元素高度的比例设置，也能够适应不同宽度下的显示效果。