位置: IT常识 - 正文

css解决uniapp使用image标签图片无法撑满全屏问题(uniapp的css库)

编辑:rootadmin
css解决uniapp使用image标签图片无法撑满全屏问题 css解决uniapp使用image标签图片无法撑满全屏问题文章目录css解决uniapp使用image标签图片无法撑满全屏问题前言一、问题还原二、问题解决1、在解决问题之前有必要先来学习一个css的属性2、问题的原因3、解决问题总结前言

推荐整理分享css解决uniapp使用image标签图片无法撑满全屏问题(uniapp的css库),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uni-app css,uni-app css,uniapp style不起作用,uniapp css框架,uniapp引入外部css,uniapp样式适配,uni-app css,uniapp引入外部css,内容如对您有帮助,希望把文章链接给更多的朋友!

本片文章主要讲解了如何解决,开发中遇到需要让图片撑满全屏,但实际图片会留空白的问题。 示例虽然是uniapp的版本,但是同样适用于h5版本。

一、问题还原css解决uniapp使用image标签图片无法撑满全屏问题(uniapp的css库)

代码结构很简单,就是一个图片标签

uniapp:<image mode="widthFix" src="../static/img@2x.png"></image>h5:<img src="../img/img@2x.png" alt="">img { width: 100%; vertical-align: bottom;}image { width: 100%; vertical-align: bottom;}

效果图:

二、问题解决1、在解决问题之前有必要先来学习一个css的属性

vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

vertical-align: baseline;/*使元素的基线与父元素的基线对齐。*/vertical-align: sub;/*使元素的基线与父元素的下标基线对齐。*/vertical-align: super;/*使元素的基线与父元素的上标基线对齐。*/vertical-align: text-top;/*使元素的顶部与父元素的字体顶部对齐。*/vertical-align: text-bottom;/*使元素的底部与父元素的字体底部对齐。*/vertical-align: middle;/*使元素的中部与父元素的基线加上父元素 x-height(译注:x 高度)的一半对齐。*/vertical-align: top;/*使元素及其后代元素的顶部与整行的顶部对齐。*/vertical-align: bottom;/*使元素及其后代元素的底部与整行的底部对齐。*/2、问题的原因

1、因为img属于行内替换元素,所以默认对齐基线为baseline所以底部留白是是基线以下的部分 2、至于基线是什么可以理解为拼音的线格

3、解决问题

将对其方式改为bottom底部对齐轻松解决问题 效果图:

总结

如有问题欢迎指出。

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

上一篇:vue3 如何实现 表格内容无缝滚动,我又写了一堆冗余代码(vue3怎么用)

下一篇:VIte+Vue3 打包在FIle本地index.html打开项目(不需要起服务)(vue app打包)

  • 不含税金额计算税额的计算公式
  • 纳税人识别号是什么哪里可以查到
  • 利息资本化计入什么现金流量科目
  • 小规模纳税人不开票需要纳税吗
  • 支票存根必须盖银行章吗
  • 预缴企业所得税怎么做会计分录
  • 累计折旧和固定资产减值准备的区别
  • 特定资产收益权融资业务
  • 所得税汇算清缴表在哪里打印
  • 公司注销后专利还能转让吗
  • 经营公租房的租金收入交房产税
  • 公司购买工装计入什么费用
  • 公司先注册实收资本后付账该如何做会计处理呢?
  • 2021申请一般纳税人公司的条件
  • 商品按照售价金额核算法进行日常核算
  • 车间未完工的产品属于什么
  • 外汇实收资本如何做账
  • 公司技术服务部是干嘛的
  • 存货周转次数计算公式怎么理解
  • 财务部水电费会计分录
  • 公司党支部的费用入账
  • 交通费进项税抵扣计算
  • 用人单位逾期未缴纳社会保险费可能会使用的文书
  • 固定资产评估增值后如何入账
  • 对外贸易法律的特征包括
  • mac怎么设置桌面组件
  • 地方水利建设基金
  • 进程rundll32
  • PHP:iconv_substr()的用法_iconv函数
  • 其他业务支出的二级科目有哪些
  • php公众号推送完整示例
  • 集团的资产
  • Joomla简单判断用户是否登录的方法
  • 划拨建设用地使用权没有使用期限的限制
  • 工作服列支什么科目
  • php中的强制类型转换函数有哪些?
  • 万能转换器mp4
  • 所有者权益股东权益区别
  • 无退税产品出口征税
  • 固定资产以什么资金形态存在
  • sql 分组排名
  • 租赁费的增值税可以抵扣吗
  • 工资与社保缴纳不一致
  • 一般纳税人收到的普票可以抵扣吗
  • 内含报酬率的意义
  • 偶然所得代扣代缴个人所得税会计分录
  • 融资租入固定资产的改建支出
  • 增值税零税率发票开了2年,没给对方
  • 公司向个人借款怎么做账
  • 简易计税方法缴纳城建税和教育税
  • 上月发票冲红后怎么作废
  • 生产辅料清单
  • 提前报废固定资产需要补提折旧
  • 防伪税控费用抵税分录
  • 免税发票可以抵扣税收农产品吗
  • Windows下安装爱思助手V8
  • windows安装mysql8.0
  • 电脑提示Windows照片查看器无法打开此图片
  • windows查询
  • win8的应用商店在哪
  • linux 中的MYSQL命令汇总 适合学习linux下配置mysql的朋友
  • 系统闹钟设置
  • win10更新只能暂停35天
  • unity 读取xml文件
  • 如何限制用户只能使用
  • css弹出层
  • cocos creator rpg
  • unity如何避免碰撞穿透
  • 批处理 判断文件是否存在
  • 浅谈python要进行房价预测的优点和缺点
  • angular的ngif
  • 学node.js需要什么基础
  • node发送邮箱
  • cd跳转不到目录
  • 从零基础开始学
  • jquery遍历div
  • jquery获取值的几种方法
  • 上海税务登记如何网上申请
  • 各种税费申报日期
  • 税务系统绩效管理首要目标
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设