CSS实现宽度自适应宽高16:9的矩形的示例

实现宽度自适应宽高16:9的矩形，可以通过以下步骤完成：

Step 1：创建HTML代码框架

在HTML中，我们首先需要创建一个矩形容器div，并赋予宽高比例为16:9。代码如下：

<div class="r-container">
</div>

Step 2：设置CSS样式

1. 设置容器样式

我们给容器设置最小高度为0，使其能够根据子元素撑开高度；设置padding-bottom为56.25%，即高度为宽度的56.25%，实现16：9的比例。同时给容器设置背景颜色，方便观察。

.r-container {
    position: relative;
    min-height: 0;
    padding-bottom: 56.25%;
    background-color: #eee;
}

2. 设置内容样式

在容器里面放入一个子元素div，为了实现矩形内容的居中，我们给子元素设置绝对定位，使用top、left、bottom、right把子元素定位到容器的中心，然后设置水平垂直居中。再为子元素设置背景颜色和宽高。

.r-container > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: #fff;
}

示例1：

我们通过这个示例更好地理解一下：

<div class="r-container">
    <div></div>
</div>

.r-container {
    position: relative;
    min-height: 0;
    padding-bottom: 56.25%;
    background-color: #eee;
}

.r-container > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: #fff;
}

在这个示例中，我们创建了一个容器，把子元素放入其中，子元素呈矩形，宽高比16:9，实现了自适应布局。

示例2：

除此之外，我们还可以在原有的布局基础上加入其他内容，实现更多的效果。

<div class="r-container">
    <div>
        <h2>这是一个标题</h2>
        <p>这是一段文字内容</p>
    </div>
</div>

.r-container {
    position: relative;
    min-height: 0;
    padding-bottom: 56.25%;
    background-color: #eee;
}

.r-container > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: #fff;
}

.r-container > div h2 {
    margin-top: 10%;
    text-align: center;
}

.r-container > div p {
    margin-top: 5%;
    text-align: justify;
    padding: 0 5%;
}

在这个示例中，我们除了实现了宽高比为16:9的自适应矩形布局，还在其中添加了一个标题和一段文本内容，并对它们进行了样式设计，使它们能更好地呈现在矩形中部位。