响应式容器 | 宽高比 | CSS 教程

简介

在本实验中，我们将学习如何使用 CSS 创建具有指定宽高比的响应式容器。你将了解 --aspect-ratio 自定义属性，以及如何使用 calc() 函数来计算容器的高度。你还将学习如何使用 object-fit: cover 属性设置子元素以保持宽高比。在本实验结束时，你将更好地理解如何在网页上创建视觉上吸引人的响应式容器。

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

宽高比

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

这段代码使用 CSS 自定义属性和 calc() 函数创建了一个具有特定宽高比的响应式容器。按照以下步骤来实现：

使用 CSS 自定义属性 --aspect-ratio 定义所需的宽高比。
将容器元素的 position 属性设置为 relative，height 属性设置为 0。
使用 calc() 函数和 --aspect-ratio 自定义属性计算容器元素的高度，并将其设置为 padding-bottom 属性。
将容器元素的直接子元素设置为 position: absolute、top: 0、left: 0、width: 100% 和 height: 100%。
通过将子元素的 object-fit 属性设置为 cover 来保持其宽高比。

使用以下 HTML 和 CSS 代码创建容器：

<div class="container">
  <img src="https://picsum.photos/id/119/800/450" />
</div>

.container {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100% / var(--aspect-ratio));
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

总结

恭喜你！你已经完成了宽高比实验。你可以在 LabEx 中练习更多实验来提升你的技能。

使用 CSS 创建具有响应式容器宽高比

简介

宽高比

总结