css解決uniapp使用image標(biāo)簽圖片無(wú)法撐滿全屏問(wèn)題

前言

本片文章主要講解了如何解決，開(kāi)發(fā)中遇到需要讓圖片撐滿全屏，但實(shí)際圖片會(huì)留空白的問(wèn)題。
示例雖然是uniapp的版本，但是同樣適用于h5版本。

一、問(wèn)題還原

代碼結(jié)構(gòu)很簡(jiǎn)單，就是一個(gè)圖片標(biāo)簽

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;
}

效果圖：

二、問(wèn)題解決

1、在解決問(wèn)題之前有必要先來(lái)學(xué)習(xí)一個(gè)css的屬性

vertical-align 用來(lái)指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對(duì)齊方式。

vertical-align: baseline;/*使元素的基線與父元素的基線對(duì)齊。*/
vertical-align: sub;/*使元素的基線與父元素的下標(biāo)基線對(duì)齊。*/
vertical-align: super;/*使元素的基線與父元素的上標(biāo)基線對(duì)齊。*/
vertical-align: text-top;/*使元素的頂部與父元素的字體頂部對(duì)齊。*/
vertical-align: text-bottom;/*使元素的底部與父元素的字體底部對(duì)齊。*/
vertical-align: middle;/*使元素的中部與父元素的基線加上父元素 x-height（譯注：x 高度）的一半對(duì)齊。*/
vertical-align: top;/*使元素及其后代元素的頂部與整行的頂部對(duì)齊。*/
vertical-align: bottom;/*使元素及其后代元素的底部與整行的底部對(duì)齊。*/

2、問(wèn)題的原因

1、因?yàn)閕mg屬于行內(nèi)替換元素，所以默認(rèn)對(duì)齊基線為baseline所以底部留白是是基線以下的部分
2、至于基線是什么可以理解為拼音的線格

3、解決問(wèn)題

將對(duì)其方式改為bottom底部對(duì)齊輕松解決問(wèn)題
效果圖：

到此這篇關(guān)于CSS解決uniapp使用image標(biāo)簽圖片無(wú)法撐滿全屏問(wèn)題(最新解決方法)的文章就介紹到這了,更多相關(guān)css image標(biāo)簽圖片無(wú)法撐滿全屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論