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

前言

本片文章主要讲解了如何解决             ，开发中遇到需要让图片撑满全屏  
 
  
 
  
 
  
 
  
 
  
 
  
，但实际图片会留空白的问题
  
  
  
  
  
  
 。

一             、问题还原

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

效果图：

二  
 
  
 
  
 
  
 
  
 
  
 
  
、问题解决

1












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

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


 


 


 


 


 


 

。

2
  
  
  
  
  
  
 、问题的原因

1  
  
  
  
  
  
 、因为img属于行内替换元素  
  
  
  
  
  
 ，所以默认对齐基线为baseline所以底部留白是是基线以下的部分 2
 


 


 


 


 


 


 
、至于基线是什么可以理解为拼音的线格

3
 
 
 
 
 
 
、解决问题

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

效果图：

总结

如有问题欢迎指出 
 
 
 
 
 
 
 
 
 
 
 
 
 。