在网页设计中，经常需要实现固定比例的矩形效果，例如图片缩略图或是轮播图的显示。通过 CSS 可以实现各种各样的矩形效果，本文将介绍两种在 CSS 中实现固定比例矩形的方法。

方法一：使用 padding 实现

.box{
width: 400px;
height: 0;
padding-bottom: 75%; /* height / width = 3 / 4 */
background-color: #ccc;
}

上述代码中，首先设置宽度为 400px，然后通过 padding-bottom 的百分比值（75%）来实现高度，其中高度与宽度的比例为 3：4。由于盒模型的特性，padding-bottom 的百分比值会根据宽度计算，从而实现固定比例矩形。最后通过设置背景颜色，可以看到一个宽度为 400px，高度为 300px 的矩形。

方法二：使用伪元素实现

.box{
width: 400px;
height: 0;
position: relative;
background-color: #ccc;
}
.box:before{
content: "";
display: block;
padding-bottom: 75%; /* height / width = 3 / 4 */
}

上述代码中，首先设置宽度为 400px，然后通过伪元素 ::before 来实现比例计算。设置 ::before 的 padding-bottom 百分比值为 75%，并将样式设置为块级元素，从而让伪元素能够占据实际空间。最后通过设置 .box 的 position 为相对定位（relative）来使伪元素在 .box 内部定位。由于伪元素的宽度与 .box 宽度相同，所以通过 padding-bottom 实现高度，从而得到一个宽度为 400px，高度为 300px 的矩形。

两种方法各有优缺点，使用 padding 来实现固定比例矩形有一个明显优点，即不需要添加额外的 HTML 元素；而使用伪元素的优点在于可以兼容 IE8 及以上版本浏览器。在实际应用中，根据项目需要选择不同的方法，即可实现各种不同的固定比例矩形效果。