在前端开发中，我们常常需要控制 HTML 中某元素的宽高比例。传统实现这一功能的方式有很多，比如使用 padding 和 absolute 定位等方法。然而，在日常开发中，我们可能经常碰到这样一种需求：需要在某个元素上保留一个宽高比，同时这个比例需要随着视窗大小变化而自适应调整。
针对这种需求，我们可以使用一个叫做 css-aspect-ratio 的 npm 包来实现，它提供了一种简洁且易用的方法来处理宽高比例。接下来我将介绍如何使用 npm 包 css-aspect-ratio 实现这种宽高比适应调整的功能。
一、安装
在使用 css-aspect-ratio 之前，我们需要先在项目中安装它。
通过 npm 命令进行安装：
npm install css-aspect-ratio --save
或者使用 yarn 命令：
yarn add css-aspect-ratio
二、使用
1. 引入 css-aspect-ratio
在项目中引入 css-aspect-ratio：
import 'css-aspect-ratio'
或者在 HTML 文件中通过链接引入：
<link rel="stylesheet" href="path/to/css-aspect-ratio.min.css">
2. 使用特定的 css class
css-aspect-ratio 需要使用特定的 class 来实现宽高比例的效果，我们需要给目标元素添加类名。类名的命名规则如下：
.aspect-ratio-{width}-{height}其中，{width} 和 {height} 分别是需要保留的宽高比的分子和分母。
例如，如果我们需要保留 16:9 的宽高比，可以给目标元素加上如下样式：
<div class="aspect-ratio-16-9">16:9 wide</div>
3. 支持自适应调整
css-aspect-ratio 支持自适应调整，当视窗大小变化时，宽高比例也会随之调整。这通过添加一个 has-aspect-ratio 的类名来实现。
对于需要自适应调整的宽高比元素，我们需要给它们添加 has-aspect-ratio 类名：
<div class="aspect-ratio-16-9 has-aspect-ratio">16:9 wide</div>
到这里，我们已经成功地实现了宽高比例的功能。但是，我们还可以通过 css-aspect-ratio 提供的一些 css 变量来对元素进行更加精细的调整。
三、自定义样式
css-aspect-ratio 提供了以下几个 css 变量，用于自定义宽高比元素的样式：
--aspect-ratio-padding-top：设置元素顶部的 padding 值。默认为calc(100% / var(--aspect-ratio))。--aspect-ratio-margin-height：设置元素高度的外边距值。仅在使用has-aspect-ratio类名时生效，用于实现与上一个兄弟元素的间距。默认为0。--aspect-ratio-margin-width：设置元素宽度的外边距值。仅在使用has-aspect-ratio类名时生效，用于实现自适应调整时与视窗的间距。默认为0。
我们可以根据实际需求给这些 css 变量赋值，实现更加精细的宽高比元素样式。
以下是一个例子：
<div class="aspect-ratio-4-3 has-aspect-ratio"
style="--aspect-ratio-margin-width: 10px;
--aspect-ratio-padding-top: calc(100% / 4 * 3)"
>
4:3
</div>在这个例子中，我们实现了 4:3 的宽高比，并且为元素添加了额外的边距和 padding，使其在视觉效果上更加美观。
四、总结
css-aspect-ratio 是一个非常实用的 npm 包，可以用来简单高效地实现宽高比例的控制，并且支持自适应调整。我们只需要按照它提供的 css class 来编写样式，就可以轻松实现目标效果。在实际开发中，我们可以根据业务需求自定义样式，实现更加丰富多彩的宽高比元素效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554f981e8991b448d231a