首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

巧用css属性,保持元素的宽高比

  • 24-12-16 16:08
  • 2197
  • 356337
juejin.cn

在页面绘制时,经常遇到元素的宽度或者高度需要自适应,但又希望保持元素的宽高比。

如何实现这样的效果,而不需要使用额外的HTML结构或 js 代码。

❤ 这里分享两个方法:

自适应.gif

方法一:使用 aspect-ratio 属性

css
代码解读
复制代码
.box { width: 50%; aspect-ratio: 16 / 9; }
  • width: 100%; :设置元素的宽度为其父元素的100%。
  • aspect-ratio: 16 / 9; :设置元素的宽高比为16:9。由于已经指定了宽度,浏览器会根据这个比例自动计算高度。

这种方法简洁明了,但需要注意的是,aspect-ratio 属性在较旧的浏览器中可能不受支持。因此,在生产环境中使用时,您可能需要考虑浏览器兼容性。

方法二:使用 padding-bottom 技巧

css
代码解读
复制代码
.box { width: 100%; height: 0; padding-bottom: 56.25%; }
  • width: 50%; :同样设置元素的宽度为其父元素的100%。
  • height: 0; :将元素的高度设置为0。
  • padding-bottom: 28.125%; :通过设置底部内边距为宽度的56.25%(即9/16),可以间接地设置元素的高度,从而实现16:9的宽高比。由于元素的高度被设置为0,其内容(如果有的话)将不会占据任何空间,但padding-bottom会创建一个可视区域,其高度与宽度成16:9的比例。

这种方法是一种传统的CSS技巧,兼容性好,但在某些情况下可能需要额外的HTML结构来包裹内容,以确保内容正确显示。

总结

当你在考虑怎么让页面上的某个元素保持固定的宽高比时,你可以根据实际情况和浏览器兼容性来挑选最合适的方法。

如果你希望你的网页能在各种浏览器上都能看起来好好的,特别是那些老旧的浏览器,那么用padding-bottom这招会比较保险。这个方法很靠谱,能在很多不同的浏览器上稳定运行。

但要是你的用户大多都在用新版的浏览器,而且你也想让代码看起来更简洁、更好懂,那aspect-ratio这个属性就挺适合的。它直接就能设定好元素的宽高比,代码写起来也简洁明了。

所以,具体选哪个方法,还得看你的需求和用户的浏览器使用情况来定。

demo分享

自适应.gif

html
代码解读
复制代码
<body> <div class="resize-container"> <div class="box1"> 宽高比16/9<br/> aspect-ratio div> <div class="box2"> 宽高比16/9<br/> padding-bottom div> div> body>
css
代码解读
复制代码
注:本文转载自juejin.cn的饮茶三千的文章"https://juejin.cn/post/7448816061705322535"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

104
前端
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top