位置: 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打包)

  • 商品流通企业都交什么税
  • 银行开具的票据有哪些
  • 个体户和公司的经营范围有区别吗
  • 企业所得税不含税价格怎么算
  • 资产评估费怎么收
  • 预收款转营业外收入条件
  • 当期处置子公司,当期还纳入合报范围嘛
  • 财政科技经费专项拨款的会计处理
  • 跨境电商怎么交税
  • 净利润增长率计算公式是什么意思
  • 企业收回报废产品合法吗
  • 增值税应交税费科目
  • 账本印花税如何申报缴纳
  • 收到多开发票已认证怎么做账?
  • 企业所得税少交了被税局查到怎么处理
  • 建筑施工企业购进材料会计分录
  • 无产权车位20年到期后还收费吗
  • 罚款费用报销单怎么写
  • 资产负债表日后事项是什么意思?
  • 母子公司之间支付的租赁费可以税前扣除么
  • 餐饮行业固定资产界定
  • 审计费可以抵扣进项吗
  • 应收账款贷方余额重分类到哪
  • 华硕笔记本电脑售后维修服务网点
  • macbook无限输入z
  • 专用发票增量申请流程
  • 如何网络测试
  • 通过mac地址查找ip的协议
  • mom.exe是什么进程
  • Vue3+element-plus 后台管理系统(含登陆注册功能页面)
  • PHP:imagepsloadfont()的用法_GD库图像处理函数
  • 工业企业应付会计工作内容
  • 密歇根湖怎么读
  • 贝纳克波斯图干红葡萄酒
  • 未分配现付是什么意思
  • framework3.5怎么打开
  • 学会这两种方式英语
  • php或者判断
  • 年底应交增值税借方余额怎么处理
  • php 时间
  • PhoneGap was accuriqed by adobe
  • 织梦cms为什么不维护了
  • 入库材料计入什么科目
  • 车间劳保费计入什么科目
  • 税款已缴未入库怎么处理
  • 财政部关于印发财政专户管理办法的通知
  • 根据sql脚本修改数据类型
  • 百旺金赋抄报税指南
  • 企业利润表表怎么看
  • mariadb10安装
  • 财产转让按什么计征
  • 差旅费所得税扣除标准2023
  • 采购未到票如何入账
  • 为什么生产经营许可证要第三方代办
  • 伙食费占支出比例
  • 事业单位的在建工程包括
  • 固定资产折旧度怎么计算
  • 建账的基本原则包括
  • mysql性能比较
  • centos怎么配置ssh
  • mmc不能打开文件services.msc
  • 新手怎样
  • win7更改电脑设置在哪里
  • securecrt keymap
  • windowsxp如何隐藏文件
  • 将windows的文件上传到ubuntu
  • windows8.1正版
  • linux的截图工具
  • win8怎么改成win10
  • preorder遍历
  • Unity3D游戏开发标准教程
  • js 验证数字
  • js 箭头表达式
  • unity编译速度吃什么硬件?
  • unity3ds
  • 残疾人就业保障金什么时候申报缴纳
  • 自然人电子税务局下载
  • 双方交换住房可以吗
  • 信用社股金转让 办理要多少时间
  • 上海市办居住证流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设