在网页设计中，盒子是最基本的元素之一，其中包含了很多的CSS属性，例如宽度、高度、边框、内边距等等。当需要对盒子进行缩放时，有时需要保持盒子的比例不变，本文将介绍如何使用CSS实现盒子缩放保持比例。
.box {
width: 200px;
height: 200px;
background-color: #f00;
}
.box:hover {
transform: scale(1.5);
}
在上述代码中，我们定义了一个宽高均为200px的盒子，并设置了红色背景色。当鼠标悬停在盒子上时，使用CSS3的transform属性将盒子放大了1.5倍。
然而，放大后的盒子可能失去原本的比例，如何才能保持盒子的比例呢？我们可以使用伪元素来实现。具体来说，我们需要在盒子里嵌套一个伪元素，然后设置其padding-bottom为百分比，且值等于盒子的高度与宽度比例。例如，如果盒子的宽为200px，高为100px，那么我们在盒子里嵌套的伪元素的padding-bottom应设置为50%（100/200）。
.box2 {
width: 200px;
height: 100px;
background-color: #0f0;
position: relative;
}
.box2::after {
content: "";
display: block;
padding-bottom: 50%;
}
.box2:hover {
transform: scale(1.5);
}
在上述代码中，我们定义了一个宽为200px、高为100px的盒子，并设置了绿色背景色。在盒子里嵌套了一个伪元素，其中content属性为空，display属性设置为block，以将伪元素视为块级元素。padding-bottom设置为50%，保持了盒子的高宽比例。在盒子放大时，由于伪元素的存在，保证了盒子的高宽比例不变。
使用CSS的transform属性和伪元素设置padding-bottom，我们可以很方便地实现盒子缩放保持比例的效果，让网页设计更加精美。
