【复习】CSS实现宽高等比自适应容器

【复习】CSS实现宽高等比自适应容器

在移动页面开发中，常遇到需要创建一个宽度自适应，高度为宽度一半的容器的场景。本文将分享实现这一效果的两种方法。

首先思考实现策略。设想在移动端页面上，有一张宽度占满屏幕的图片，若不设置高度，图片会根据原有尺寸等比缩放。同样，我们可借鉴这一思路，通过元素的高度计算出相应的高度比例。

方法一：使用视口单位（vw）实现。视口单位相对于视口尺寸，100vw 等于视口宽度的 100%，即 1vw 等于视口宽度的 1%。结合这一特性，可实现移动端容器的宽高等比自适应。代码示例如下：

HTML 代码：略

CSS 代码：略

原理在于，以图片原始尺寸 884 * 455 的宽高比（455 / 884 = 51.5%）为基础，无论图片加载状态，容器高度始终计算完成，不造成页面抖动或重绘，提升性能。

方法二：通过子元素 padding 实现。这一方法较为常用且效果较好，需理解子元素 padding 的百分比值基于父容器宽度。代码及效果示意如下：

HTML 代码：略

CSS 代码：略

分析：将父容器.box 宽度设为 200px，子元素.text 的 padding:10%，.box 的 padding 计算结果为 20px。基于这一原理，结合等比例问题，实现代码如下：

HTML 代码：略

CSS 代码：略

在 .text padding-bottom: 51.5%; 的设置下，确保了高度比例的正确计算。为避免 .text 设置 height: 0; 引起的高度偏差，采取这一策略。通过上述两种方法，成功解决了宽度自适应、高度为宽度一半的容器问题。2024-08-15