位置: 编程技术 - 正文

CSS百分比padding制作图片自适应布局(css百分比进度条)

编辑:rootadmin

推荐整理分享CSS百分比padding制作图片自适应布局(css百分比进度条),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css百分比宽高什么意思,css百分比布局,css百分比和像素区别,css百分比 包含块,css百分比布局,css百分比布局,css百分比减px计算,css百分比减px计算,内容如对您有帮助,希望把文章链接给更多的朋友!

一、CSS百分比padding都是相对宽度计算的

在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样。

这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开。

对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素:

或者:

或者:

则这个<div>元素尺寸就是一个宽高1:1的正方形,无论其父容器宽度是多少,这个<div>元素总能保持比例不变。

这种能固定比例的特性什么作用呢?

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的,例如手机端的一个通栏广告,iPhone7下宽度是,iPhone7 Plus下是,还有等尺寸,此时需要的不是对图片进行固定尺寸设定,而是比例设定。

通常有如下一些实现:

1. 固定一个高度,然后使用background-size属性控制,如下:

实时效果如下:

可以看到随着宽度的变化,总会有部分图片区域(宽度或高度)无法显示,并不是完美的做法。

2. 使用视区宽度单位vw,如下:

如果对兼容性要求不是很高,使用vw也是一个不错的做法,至少理解起来要更轻松一点。

但是,如果我们的图片不是通栏,而是需要离左右各1rem的距离,此时,我们的CSS代码就要??碌懔耍?胍?3滞昝辣壤??褪褂媒柚?SS3 calc()计算:

如果,图片距离两侧的宽度是动态不确定的,则,此时calc()也捉襟见肘了,但,恰恰是普普通通其貌不扬的padding属性,其兼容性和适应性都一级棒。

3. 使用百分比padding,如下:

CSS百分比padding制作图片自适应布局(css百分比进度条)

此时无论图片的外部元素怎么变动,比例都是恒定不变的。

二、CSS百分比padding与宽度自适应图片布局

但是有时候我们的图片是不方便作为背景图呈现的,而是内联的<img>,百分比padding也是可以轻松应对的,求套路是比较固定的,图片元素外面需要一个固定比例的容器元素,例如下面的HTML结构:

.banner元素同样负责控制比例,然后图片填充.banner元素即可,CSS代码如下:

效果就达成了!

眼见为实,去年起点中文网手机版诸多页面的通栏广告就都是这么实现的,最终的效果参见下面的gif截图(如果图无法显示,可以评论反馈):

可以看到,无论屏幕宽度多宽,我们的广告图片比例都是固定的,不会有任何剪裁,不会有任何区域缺失,布局就显得非常有弹性,也更健壮。

————-

其实,我之前一直低估百分比padding的实际应用价值,因为有vw单位的存在,毕竟理解vw看上去要更简单一些,所以,一直就没做相关技巧的介绍。但是,随着图片相关布局处理越来越多,我发现,百分比padding的实用价值要比想象的大,要比vw单位适用场景更多,兼容性更好(百分比特性IE6+支持,图片%覆盖IE8+支持)。

对于复杂布局,如果图片的宽度是不固定的自适应的,我们通常会想到这么一个取巧的做法,就是只设定图片的宽度,例如:

此时浏览器默认会保持图片比例显示,图片宽度大了,高度也跟着一起变大;图片宽度小了,高度也跟着一起变小。开发人员似乎无需关心图片真实比例是怎样的。

然而这种技巧有一个非常不好的体验问题,那就是随着页面加载的进行,图片占据的高度会有一个从0到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。

所以对图片高宽进行同时约定还是有必要的,但是同时要保证宽度自适应,似乎有点难度。记住,如果遇到这种需求场景,没有比百分比padding布局更好的做法!

缩小浏览器宽度可以看到不同宽度下的布局效果,Gif效果截图如下:

此demo难点就是图片自适应同时保持比例,以及页面刷新的时候没有布局稳固不晃动,其核心HTML和CSS代码如下:

可以看到,当把垂直方向padding值只使用padding-bottom表示的时候,如果没有text-align属性干扰,<img>元素的left:0;top:0是可以省略的。

对于这种图片宽度%容器,高度按比例的场景,padding-bottom的百分比值大小就是图片元素的高宽比,就这么简单。

但,有时候,图片宽度并不是%容器的,例如,图片宽度%容器宽度,图片高宽比4:3,此时,CSS垂直方向百分比就了,如下:

详解CSS样式中的!important、*、_符号 详解CSS样式中的!important、*、_符号!important、*、_其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然

详解IE6中的position:fixed问题与随滚动条滚动的效果 详解IE6中的position:fixed问题与随滚动条滚动的效果前言:在《【jQuery】兼容IE6的滚动监听》(点击打开链接)提及到解决IE6fixed问题,具体是要引入一

前端获取http状态码的返回值实例 如下所示:axios.get("/check_mobile_and_sent_code",{withCredentials:true,params:{mobile:formInline.mobile}}).then(res={console.log(res);//if(res.result==true){if(!this.timer){this.count=this.TIME_

标签: css百分比进度条

本文链接地址:https://www.jiuchutong.com/biancheng/368724.html 转载请保留说明!

上一篇:HTML基本语法和语义写法规则与实例(html的基本语法规则)

下一篇:详解CSS样式中的!important、*、_符号(css样式的使用)

  • 财税新闻稿
  • 对公帐户退款
  • 农业合作社享受优惠政策
  • 资本公积什么情况下转增资本
  • 开业前的其他费用
  • 建筑业工程项目登记是哪方提交
  • 对公账户汇款用途可以随便写吗
  • 员工对公司造成损失的,可以起诉吗
  • 已经给员工交了社保能退吗
  • 关于处置固定资产的请示
  • 进出口经营权什么意思
  • 增值税税负率怎么算
  • 专用设备抵免企业所得税目录
  • 购进的库存商品转自用
  • 个体定税标准
  • 最新定额是哪年
  • 总资产净利率计算
  • excel合并的单元格怎么填充序列
  • 怎样将u盘制作成电脑系统启动盘?
  • 专项储备属于什么科目代码
  • 事业单位自筹基金有哪些
  • 房产契税怎样交费
  • 拍卖获得收入个税
  • 企业车间承包合同的法律效力
  • 工程材料怎么开票
  • 增值税发票要审核成功才能开吗
  • intempt
  • 电脑前面板耳机没声音怎么设置bios
  • 月末结转本年利润怎么算
  • PHP:iconv_mime_encode()的用法_iconv函数
  • 长期债券投资业务处理
  • 科技三项费用拨款共计5000万元
  • 房产税城镇土地使用税申报期限
  • PHP:imagecolortransparent()的用法_GD库图像处理函数
  • 关于出售使用过的东西
  • vue打包注意事项
  • 现金日记账的填制要求
  • 酒店会计做账流程及内容
  • 电子发票冲红后对方能查到吗
  • 不交社保个税怎么处理
  • 利息支出会计科目
  • 投资性房地产由成本模式转为公允价值模式
  • 销项负数会计分录怎么写
  • SQL Server解析XML数据的方法详解
  • 发票定额 超过怎么办
  • 注册资本印花税2023年新规定
  • 以前年度损益调整结转到本年利润吗
  • 行政单位要不要税号?
  • 实收资本为零该怎么办
  • 劳务报酬所得如何申报
  • 工资计提数小于发放数,如何处理
  • 视同销售要以什么顺序确定销售额?
  • 出口退税哪些商品不能退
  • 企业建账的流程是什么
  • 建账是不是只需要科目余额表
  • sql server数据库怎么使用
  • 全面解析皮炎
  • CentOS中mysql cluster安装部署教程
  • win7快速切换到桌面
  • xp系统 win7
  • ubuntu16.04命令行配置静态ip
  • 如何用u盘装系统盘
  • linux设置用户名和密码
  • linux ioctrl
  • window10重启按什么键
  • win7系统的虚拟内存在哪里
  • hwid.exe
  • windows8装 .NET 3.5 时出现0x800F0907错误解决方法
  • win7 0x80070002处理方法
  • win10hdmi转vga显示器没反应
  • perl语句
  • unity调用c++动态库
  • javascript val
  • 正则表达式/a/g
  • linux命令统计
  • unity manifest
  • Unity3D Vuforia Android 拨打电话
  • jqgrid 动态表头
  • python whiletrue循环语句
  • 代扣代缴企业所得税会计分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设