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

简介

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35183{{"`固定宽高比`"}} css/colors -.-> lab-35183{{"`固定宽高比`"}} css/width_and_height -.-> lab-35183{{"`固定宽高比`"}} css/display_property -.-> lab-35183{{"`固定宽高比`"}} css/backgrounds -.-> lab-35183{{"`固定宽高比`"}} css/pseudo_elements -.-> lab-35183{{"`固定宽高比`"}} end

固定宽高比

虚拟机中已提供了 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 中练习更多实验以提升技能。

固定宽高比

简介

Skills Graph

固定宽高比

总结

您可能感兴趣的其他 CSS 教程