使用CSS保持div的宽高比

技术背景

在前端开发中，经常会遇到需要保持元素宽高比的场景，比如响应式设计中的图片、视频容器等。不同的设备屏幕尺寸和布局需求，使得保持元素的宽高比变得尤为重要，这样可以确保页面在各种环境下都能呈现出一致的视觉效果。

实现步骤

1. 使用padding-bottom属性

创建一个包裹的<div>，并为其padding-bottom设置百分比值。

<div class="demoWrapper">
  <div></div>
</div>

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold;
}

这种方法会使<div>的高度等于其容器宽度的75%，实现4:3的宽高比。

2. 使用aspect-ratio CSS属性

这是一种简单且灵活的解决方案，直接为元素指定固定的宽高比。

<div class="demo"></div>

.demo {
  background: black;
  width: 500px;
  aspect-ratio: 4/3;
}

此属性是现代属性（2021年推出），所有现代浏览器都支持。

3. 使用vw单位

使用vw单位设置元素的宽度和高度，基于视口宽度来保持元素的宽高比。

<div></div>

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

4. 使用<svg>和display: grid

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1;
}

核心代码

使用aspect-ratio属性保持4:3宽高比

<div class="demo"></div>

.demo {
  background: black;
  width: 500px;
  aspect-ratio: 4/3;
}

使用vw单位保持1:1宽高比

<div></div>

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

最佳实践

• 优先使用aspect-ratio属性：如果目标浏览器支持，优先使用aspect-ratio属性，因为它简单直接，且不依赖于父元素宽度或视口大小。
• 根据需求选择合适的方法：如果需要基于视口宽度保持宽高比，可以使用vw单位；如果需要兼容旧浏览器，可以考虑使用padding-bottom方法。

常见问题

1. aspect-ratio属性的浏览器兼容性问题

虽然现代浏览器都支持aspect-ratio属性，但旧浏览器可能不支持。可以使用@supports规则进行特性检测。

@supports (aspect-ratio: 1 / 1) {
  div {
    aspect-ratio: 16 / 9;
    background-color: orange;
  }  
}

2. 使用padding-bottom方法时内容溢出问题

如果在使用padding-bottom方法时，内容可能会溢出包裹的<div>。可以添加一个绝对定位的子元素，并将其拉伸到包裹元素的边缘。

<div class="stretchy-wrapper">
  <div>Content</div>
</div>

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}