CSS aspect-ratio 属性

aspect-ratio 是 CSS 中用于控制元素宽高比的属性,通过一行代码即可实现响应式比例布局,无需复杂计算。它确保元素在不同屏幕尺寸下保持固定比例,提升响应式设计效率。

一、基本语法与取值

css 复制代码
selector {
  aspect-ratio: <width> / <height>;
}
  • 参数说明

    • <width>/<height>:以斜杠分隔 的宽高比,如 16/9(宽度:高度=16:9)。

    • 单值语法aspect-ratio: 1 等价于 1/1(正方形)。

二、核心特性与使用规则

1.优先级规则

  • 若同时设置 widthheightaspect-ratio,宽高比可能失效(浏览器优先使用显式尺寸)。

  • 最佳实践:仅设置 widthheight 之一,另一维度由 aspect-ratio 自动计算。

css 复制代码
.box {
  width: 100%; 
  aspect-ratio: 4/3; /* 高度 = 宽度 × 3/4 */
}

2.响应式适配

  • 默认根据宽度 计算高度(若设置 height: 100% 则根据高度计算宽度)2

  • 结合 max-width/max-height 限制极值:

css 复制代码
.responsive-video {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 500px; /* 高度上限 */
}

3.与 object-fit配合

媒体元素(如图片、视频)需搭配 object-fit 避免变形:

css 复制代码
img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover; /* 裁剪多余部分 */
}

三、常见应用场景与示例

1. 保持图片/视频宽高比

html 复制代码
<div class="video-container">
  <iframe src="video.mp4"></iframe>
</div>
css 复制代码
.video-container {
  width: 80%;
  aspect-ratio: 16/9; /* 经典视频比例 */
}

2. 创建自适应正方形

css 复制代码
.square {
  background: teal;
  aspect-ratio: 1; /* 简写,等价于1/1 */
}

3. 响应式卡片布局

css 复制代码
.card {
  width: calc(33% - 20px);
  aspect-ratio: 4/3; /* 统一卡片比例 */
}
@media (max-width: 768px) {
  .card {
    width: 100%; /* 小屏单列 */
    aspect-ratio: 3/4; /* 竖屏比例 */
  }
}

4. 动态高度元素

css 复制代码
.hero-banner {
  height: 60vh; /* 基于视口高度 */
  aspect-ratio: 2/1; /* 宽度 = 高度 × 2 */
}

四、注意事项

  1. 兼容性 :现代浏览器(Chrome、Firefox、Safari、Edge)均支持,IE 不兼容2

  2. 冲突属性 :避免与 padding 百分比布局混淆(padding 百分比基于父容器宽度)。

  3. 替换元素 :对 <img><video> 等元素直接生效,无需额外容器。

五、完整代码示例

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .gallery-item {
            background: #f0f0f0;
            aspect-ratio: 3/2;
            /* 统一比例 */
            object-fit: cover;
            /* 图片裁剪适配 */
        }

        @media (max-width: 600px) {
            .gallery {
                grid-template-columns: 1fr;
            }

            .gallery-item {
                aspect-ratio: 1/1;
                /* 移动端改为正方形 */
            }
        }
    </style>
</head>

<body>
<div class="gallery">
  <img class="gallery-item" src="image1.jpg">
  <img class="gallery-item" src="image2.jpg">
  <div class="gallery-item">自定义内容(保持比例)</div>
</div>
</body>

</html>

效果展示:

相关推荐
lumi.2 分钟前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰2 分钟前
vue核心原理实现
前端·javascript·vue.js
影子信息5 分钟前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java37 分钟前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot
gihigo19981 小时前
在CentOS上配置SVN至Web目录的自动同步
前端·svn·centos
珍宝商店1 小时前
优雅的 async/await 错误处理模式指南
开发语言·前端·javascript
excel2 小时前
楖览:Vue3 源码研究导读
前端
proud12122 小时前
开源的 CSS 动画库
前端·css·开源
折翼的恶魔2 小时前
HTML媒体标签
前端·html
excel2 小时前
前端项目中的测试分类与实践 —— 以 Vue 项目为例
前端