亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS解決uniapp使用image標簽圖片無法撐滿全屏問題(最新解決方法)

  發(fā)布時間：2023-04-23 16:08:26   作者：菜雞愛上編程   我要評論
這篇文章主要介紹了CSS解決uniapp使用image標簽圖片無法撐滿全屏問題(最新解決方法),本片文章主要講解了如何解決，開發(fā)中遇到需要讓圖片撐滿全屏，但實際圖片會留空白的問題，需要的朋友可以參考下

css解決uniapp使用image標簽圖片無法撐滿全屏問題

前言

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

一、問題還原

代碼結構很簡單，就是一個圖片標簽

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底部對齊輕松解決問題
效果圖：

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

相關文章

最新評論