一、aspect-ratio 属性

基本概念 ：

aspect-ratio 用于定义元素的宽高比（宽度与高度的比例关系），控制容器本身的尺寸比例。

语法：

easpect-ratio: auto | <ratio>;

主要作用：

  • 定义元素本身的宽高比例。

  • 确保元素在响应式设计中保持固定比例。

  • 适用于任何块级元素或行内块元素。

示例：

.video-container {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #f0f0f0;
}

二、object-fit 属性

基本概念：

object-fit 用于控制替换元素（如 img、video、iframe 等）的内容如何适应其容器的宽高比。

语法：

object-fit: fill | contain | cover | none | scale-down;

主要值说明：

  • fill：拉伸内容以填充整个容器，可能会改变宽高比。

  • contain：保持内容的宽高比，缩放内容使其完全适应容器。

  • cover：保持内容的宽高比，缩放内容以完全覆盖容器，可能会裁剪内容。

  • none：保持内容原始大小，不进行缩放。

  • scale-down：比较 none 和 contain，选择显示较小的版本。

示例：

.image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

三、两者的区别

作用区别

  • spect-ratio控制元素盒子的宽高中比例，用来“定尺寸关系”。

  • object-fit控制替换元素内容如何在其盒子内部缩放/裁剪，用来“定内容呈现”。

适用范围

  • aspect-ratio适用于任意元素；有无内在比例都可用来推导另一维。

  • object-fit仅适用于替换元素，<img>, <video>, <canvas>；对普<div>无效。

交互逻辑

  • 盒子尺寸：width/heightaspect-ratio 共同决定；至少一维 auto 时，比例可推导另一维。

  • 内容呈现：在确定的盒子内 object-fit 决定内容是否保持比例、是否裁剪或拉伸。

  • 内在比例：替换元素未设 aspect-ratio 时，浏览器用资源内在比例参与尺寸计算；设置后以CSS比例为准。

典型搭配

  • 响应式封面图

.avatar { width: 48px; aspect-ratio: 1; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

  • 正方形头像裁剪

.avatar { width: 48px; aspect-ratio: 1; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

  • 图片防抖动占位

.slot { aspect-ratio: 4 / 3; }
.slot > img { width: 100%; height: 100%; object-fit: contain; }

  • 网格卡片统一比例

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.grid > .item { aspect-ratio: 3 / 4; }

四、两者结合使用

media-container {
  /* 定义容器宽高比 */
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
}

.media-container img,
.media-container video {
  /* 确保内容填充容器并保持比例 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

五、实际应用场景

aspect-ratio 应用：

  • 视频播放器容器

  • 图片画廊网格布局

  • 响应式卡片设计

object-fit 应用：

  • 图片缩略图展示

  • 头像显示

  • 响应式图片库

六、与传统方法对比

传统方法（padding trick）
.traditional-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 = 9/16 = 56.25% */
}
.traditional-ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
aspect-ratio 方法
.modern-ratio {
  width: 100%;
  aspect-ratio: 16/9;
}

七、浏览器兼容性

aspect-ratio

查看：https://caniuse.com/?search=aspect-ratio

object-fit

查看：https://caniuse.com/?search=object-fit

八、常见误区

  • 同时写width，height会 aspect-ratio 不生效；至少留一维auto或可推导。

  • object-fit不适用 <div> 背景图；背景应使background-size: cover/contain。

  • 只aspect-ratio不会裁剪内容；需要裁剪时object-fit: cover并让内容充满盒子。

  • 裁剪焦点需配object-position调整，object-position: center top。