CSS实现元素固定宽高比
概要
最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况，简而言之就是元素的宽度是随浏览器而变化，元素的高度是随元素的宽度变化的。
实现方式一：使用aspect-ratio属性
原理
使用css属性aspect-ratio指定宽高比
使用
aspect-ratio 的语法格式如下：
aspect-ratio: <widtu-ratio>/<height-ratio>
代码实现
html代码如下：
<body><div class="container"><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div> </div>
</body>
css代码如下:
* {padding: 0;margin: 0;}.container {display: grid;grid-template-columns: repeat(5, 1fr);row-gap: 20px;column-gap: 20px;padding: 20px;}.card {aspect-ratio: 1;background-color: red;}
实现效果
card元素宽高比为1:1
优缺点
优点： 实现简单,便于理解,且没有额外增加dom层级
缺点： 浏览器兼容性不太好,Chrome88或者Edge88或者Firefox89以上才支持
实现方式二：使用padding-bottom属性
原理
垂直方向上的内外边距使用百分比做单位时，是基于包含块的宽度来计算的
代码实现
html:
<body><div class="container"><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div><div class="card-wrapper"><div class="card"></div></div></div>
</body>
css:
* {padding: 0;margin: 0;}.container {display: grid;grid-template-columns: repeat(5, 1fr);row-gap: 20px;column-gap: 20px;padding: 20px;}.card-wrapper {height: 0;padding-bottom: 100%;overflow: hidden;background-color: blue;}.card {padding-bottom: 100%;background-color: red;}
实现效果
优缺点
优点： 浏览器兼容性好
缺点： 不易理解且额外增加了一层dom结构
CSS实现元素固定宽高比相关推荐
- html图片固定高宽比显示,科技常识：CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法 的相关资料,希望小伙伴们看 ...
- html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
- CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
- css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸 参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
- Android中如何使控件保持固定宽高比
目录 1.自定义view 2.adjustViewBounds 3.百分比布局 4.ConstraintLayout 我们在android开发过程中可能会遇到一种情况,一个组件需要保持固定的宽高比,但 ...
- android 怎么固定控件,Android中如何使控件保持固定宽高比
我们在android开发过程中可能会遇到一种情况,一个组件需要保持固定的宽高比,但是组件本身大小却不定.尤其在android屏幕碎片化的情况下,很多时候我们需要让一个组件宽度与屏幕宽度一致,这样就无法 ...
- 如何使用纯CSS实现固定宽高比div？
在很多场景下,我们都需要一个固定长宽比的div作为容器.直接使用js动态设置固然可行,但在页面大小变化时就不得不通过触发onresize事件来动态设置,十分不便.此文旨在于探讨使用纯CSS实现固定长宽 ...
- android按钮固定尺寸,如何在android中保持按钮的固定宽高比
我正在改进你的XML.我没有测试它,但它应该工作.建议的更改是,而不是将图像设置为背景,将其设置为ImageButtons的src.此外,如果您坚持使用Button,则可以使用其他布局包装每个按钮,并 ...
- css 大图保持宽高比压缩,CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...
最新文章
- XLNet 发明者杨植麟：从学习的角度看NLP现状与未来（附PPT下载）
- day1学python Hello Python
- bt服务器搭建 linux_Linux 搭建 我的世界(MC) 基岩版服务器
- 深入Python(1): 字典排序 关于sort()、reversed()、sorted()、cmp()等
- 动态规划各类问题分析——LeetCode习题精讲
- 计算机社团技术部部长述职报告,社团部长个人工作总结（精选6篇）
- android for循环比大小,如何让for（）循环花费更少的时间（android）？
- ckeditor4.x操作之在页面中引入(一)
- firework cs4入门
- AUTOSAR基础篇之CanTsyn
- Extjs实现角色权限流控制,对fieldset,checkbox的动态控制
- elk学习中遇到的一些问题
- 球重力异常matlab程序,球体重力异常正演程序介绍.docx
- 智能渠道商分销系统开发方案：打通协作壁垒，实现渠道商数字管理
- Idea基本操作攻略
- [风控] 评分卡分箱WOE，IV出现正无穷、负无穷解决方法
- 最新版本pycharm(2022.3)安装sklearn
- 微信小程序的分销要怎么做？
- 电信宽带_路由器设置
- 为什么我们能打开全球各地的网站呢？