固定宽高比：响应式设计技巧

简介

在本实验中，我们将探索如何为宽度各异的元素创建固定的宽高比。通过在 ::before 伪元素上使用 padding-top 属性，我们可以确保元素的高度与其宽度成比例。此技术可用于创建具有特定宽高比的响应式正方形和其他形状。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 97%。获得了学习者 100% 的好评率。

固定宽高比

虚拟机中已提供了 index.html 和 style.css。

此代码片段可确保宽度可变的元素保持成比例的高度值。要实现这一点，在 ::before 伪元素上应用 padding-top，使元素的高度等于其宽度的某个百分比。高度与宽度的比例可根据需要进行更改。例如，padding-top 为 100% 将创建一个 1:1 比例的响应式正方形。要使用此代码，只需添加以下 HTML 代码：

<div class="constant-width-to-height-ratio"></div>

然后，添加以下 CSS 代码：

.constant-width-to-height-ratio {
  background: #9c27b0;
  width: 50%;
}

.constant-width-to-height-ratio::before {
  content: "";
  padding-top: 100%;
  float: left;
}

.constant-width-to-height-ratio::after {
  content: "";
  display: block;
  clear: both;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已完成“固定宽高比”实验。你可以在 LabEx 中练习更多实验以提升技能。