告别CSS hack，拥抱Chrome中的 aspect-ratio

CSS固定宽高比那些绕不过的历史hack

CSS中关于固定宽高比的属性主要有 width 和 height，但它们只支持绝对的像素值或百分比。对于某些特殊情况，我们需要固定元素的宽高比，以保持其原始比例。例如，一个视频的宽高比是16:9，我们需要在不同设备上播放时始终保持这一比例。

为了实现这种固定宽高比，前端开发人员不得不使用一些hack手段，例如：

• Padding hack ：这种方法是利用元素的padding属性来创建固定宽高比。通过设置元素的padding-top属性为元素宽度的百分比，即可实现固定宽高比。然而，这种方法对于某些元素并不适用，例如具有流式内容的元素。
• Margin hack ：这种方法与padding hack类似，但使用margin属性来创建固定宽高比。通过设置元素的margin-left和margin-right属性为元素宽度的百分比，即可实现固定宽高比。这种方法也有一定的局限性，例如不能控制元素的高度。
• 绝对定位hack ：这种方法是通过绝对定位元素并使用top和left属性来控制元素的位置，从而实现固定宽高比。这种方法更灵活，但实现起来也更复杂，并且在某些情况下可能会导致布局问题。

这些hack手段虽然能够实现固定宽高比，但它们都不够优雅，并且缺乏灵活性。随着Web技术的发展，我们需要一种更简单、更强大的解决方案。

Chrome中的aspect-ratio属性

aspect-ratio属性是一个CSS属性，它允许我们在CSS中直接设置元素的宽高比。该属性接受一个值，该值可以是一个数字或一个分数。数字表示元素的宽高比，而分数表示元素的宽与高的比例。

例如，以下代码将创建一个宽高比为16:9的元素：

div {
  aspect-ratio: 16 / 9;
}

div {
  aspect-ratio: 80%;
}

aspect-ratio属性具有以下优点：

• 简单易用 ：该属性语法简单，易于理解和使用。
• 兼容性好 ：该属性得到了所有主流浏览器的支持，包括Chrome、Firefox、Safari和Edge。
• 灵活性强 ：该属性可以设置元素的宽高比，也可以设置元素的宽与高的比例，从而为我们提供了更多的灵活性。

使用aspect-ratio属性实现固定宽高比

使用aspect-ratio属性实现固定宽高比非常简单。我们只需要在CSS中设置元素的aspect-ratio属性即可。例如，以下代码将创建一个宽高比为16:9的视频元素：

video {
  aspect-ratio: 16 / 9;
}

当我们使用aspect-ratio属性时，我们可以通过媒体查询来调整元素的宽高比，以适应不同的设备和屏幕尺寸。例如，以下代码将创建一个在小屏幕设备上具有不同宽高比的视频元素：

@media (max-width: 768px) {
  video {
    aspect-ratio: 4 / 3;
  }
}

告别hack，拥抱aspect-ratio

aspect-ratio属性为我们提供了一种更简单、更强大、更优雅的方式来实现固定宽高比。它不仅易于使用，而且兼容性好，灵活性强。随着Chrome对该属性的支持，我们可以告别CSS hack，拥抱aspect-ratio，在前端开发中更加轻松自如地实现固定宽高比。