【CSS】css 如何实现固定宽高比

今天和同事讨论这个问题,一时间还想不到了,于是学习了下,就顺便当个记录吧

要在CSS中实现固定宽高比,有两种主要的方法可以选择。一种是使用新的aspect-ratio属性,另一种是利用padding技巧。随着现代浏览器对aspect-ratio属性的广泛支持,直接使用该属性已成为实现固定宽高比的首选方法。

使用 aspect-ratio 属性

aspect-ratio属性允许你定义元素盒子的宽高比,即使父容器或视口大小发生变化,浏览器也会调整元素的尺寸以保持指定的宽高比。至少需要一个盒子的尺寸是自动的,才能让aspect-ratio生效。如果宽度和高度都不是自动尺寸,那么提供的宽高比就不会影响盒子的首选尺寸。

以下是一个使用aspect-ratio属性的示例,它创建了一个具有16:9宽高比的元素:

复制代码
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%; /* 或者任何你想要的宽度 */
  background-color: lightblue;
}


<div class="aspect-ratio-16-9"></div>

使用 padding-top 百分比技巧

对于不支持aspect-ratio属性的旧浏览器,你还可以使用padding技巧来维持元素的宽高比。这种方法基于元素的宽度百分比和其顶部填充百分比之间的关系。

以下是一个使用padding-top技巧的示例,它创建了一个宽高比为1:1的元素:

复制代码
.aspect-ratio-1-1 {
  position: relative;
  width: 100%; /* 或者任何你想要的宽度 */
  padding-top: 100%; /* 高度等于宽度 */
  background-color: lightblue;
}


<div class="aspect-ratio-1-1"></div>

这种方法的一个缺点是它依赖于元素的宽度,因此如果元素的宽度改变,宽高比也会改变。但是,对于大多数响应式设计来说,这种方法仍然非常有用。

比如你想要创建一个宽高比为16:9的div,你可以通过设置padding-top的百分比值来实现。这个百分比值是基于div的宽度计算的,因此要得到16:9的宽高比,你需要将padding-top设置为9 / 16 * 100%,即56.25%。

复制代码
<!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>
      .container {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        /* aspect-ratio: 16 / 9; */
        background-color: red;
      }

      .content {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: red;
        text-align: center;
        line-height: 200px; /* Adjust based on your needs */
        font-size: 24px;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content">Content Here</div>
    </div>
  </body>
</html>

总结

总结起来,使用aspect-ratio属性是实现固定宽高比的现代方法,因为它直接控制元素的宽高比,不受元素宽度的影响。而padding-top技巧则是一种兼容性更好的解决方案,适用于那些不支持aspect-ratio属性的旧浏览器。

参考

aspect-ratio - CSS:层叠样式表 | MDN

相关推荐
爱吃的强哥3 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安12 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板17 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩18 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真24 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记