在網頁設計中，如何實現一個自適應的矩形是很重要的，因為它可以適應不同大小的屏幕，并且能夠優雅地適應各種展示方式。實現它的方法之一是使用CSS。

.rect {
width: 100%;
height: 0;
padding-top: 50%; /*控制高度*/
background-color: red;
position: relative;
}
.rect::before {
content: "";
display: block;
padding-bottom: 100%;
}
.rect-inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: white;
}

上述代碼會生成一個高寬比為1:2的矩形。首先，.rect類為矩形提供高度。它的padding-top屬性值設置為50%，以控制矩形的高度。然后，.rect::before偽元素伸展到100%的父元素寬度，使得父元素變成了一個正方形，在保持比例的同時，為子元素位置定位提供了參考。

最后，.rect-inner類是一個嵌套在父元素中的絕對定位的元素。它充滿了父元素，并設置了一個背景顏色來填補父元素下方的空白。

總之，在CSS實現自適應矩形時，我們只需要使用一些簡單的技術，例如使用padding-top和偽元素，就可以輕松地創建適應不同屏幕大小的矩形。