首页
前端开发
后端开发
数据库
数据分析
开发工具
测验/考试
代码笔记
🎁 作为国产 AI 大模型的佼佼者，全面、实用的 DeepSeek 教程 现已正式上线了点击参与
导航分类
CSS animation-timing-function 属性CSS backdrop-filter 属性
主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

aspect-ratio是 CSS 的一个属性，用于设置元素的宽高比，确保元素保持特定的比例。

aspect-ratio和width同时设置时，高度将按照定义的长宽比进行调整。

aspect-ratio和height同时设置时，宽度将按照定义的长宽比进行调整。

默认值： auto
继承性： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.aspectRatio="16/9"

常用的实例

接下来通过多个实例演示aspect-ratio属性的用法，来深化您对aspect-ratio属性的理解。

实例代码 运行代码
复制
/* 保持 16:9 的宽高比 */
.video-container {
    aspect-ratio: 16 / 9;
}

/* 正方形 (1:1) */
.square {
    aspect-ratio: 1 / 1;
}

/* 4:3 比例 */
.old-tv {
    aspect-ratio: 4 / 3;
}

CSS 语法

aspect-ratio: width / height;

属性值

值 描述
width / height 设置元素的宽高比（如 16/9 表示 16:9 的宽高比例）。

浏览器支持

下表中数字注明了完全支持aspect-ratio属性的首个浏览器版本。

Chrome 浏览器 EDGE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
88 88 89 15 74
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。
32 章节
13 阅读
0 评论
教程目录

CSS 参考手册

CSS 属性（字母排序） CSS 属性（功能排序） CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 可动画性 CSS Web安全字体 CSS 单位 CSS 颜色 CSS 颜色值

CSS 属性

accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function aspect-ratio backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color