保持元素的宽高比

保持元素宽高比的多种CSS方法

在响应式设计中，保持元素的宽高比是一个常见需求。以下是几种实现方法：

1. 使用 padding 百分比技巧 (经典方法)

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 (9/16 = 0.5625) */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML结构:

<div class="aspect-ratio-box">
  <div class="aspect-ratio-content">
    
  div>
div>

2. 使用 aspect-ratio 属性 (现代方法)

.aspect-ratio-element {
  aspect-ratio: 16 / 9; /* 宽度 / 高度 */
  width: 100%;
}

浏览器支持:

• 所有现代浏览器都支持
• 需要为旧版浏览器提供备用方案

3. 使用 CSS Grid 方法

.grid-container {
  display: grid;
  width: 100%;
}

.grid-container::before {
  content: "";
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  grid-area: 1 / 1 / 1 / 1;
}

.grid-content {
  grid-area: 1 / 1 / 1 / 1;
}

4. 使用 viewport 单位 (适用于全屏元素)

.fullscreen-element {
  width: 100vw;
  height: calc(100vw * 9 / 16); /* 16:9 宽高比 */
}

5. 使用 object-fit 保持媒体元素比例

.responsive-media {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  position: relative;
}

.responsive-media img,
.responsive-media video,
.responsive-media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或 contain */
}

常见宽高比计算

比例	计算方式 (padding-top 值)
1:1	100%
4:3	75%
16:9	56.25%
21:9	42.857%
9:16	177.77%

响应式变体示例

/* 根据容器宽度变化比例 */
.responsive-ratio {
  width: 100%;
  padding-top: min(100%, calc(100% * 9 / 16)); /* 最大为1:1，最小为16:9 */
}

/* 使用CSS变量 */
:root {
  --aspect-ratio: calc(9 / 16 * 100%);
}

.variable-ratio {
  width: 100%;
  padding-top: var(--aspect-ratio);
}

选择哪种方法取决于你的项目需求、浏览器支持要求和代码维护偏好。现代项目中推荐使用 aspect-ratio 属性，因为它是最简洁直观的解决方案。