HTML中有很多方法來設(shè)置圖片全屏。下面是其中幾種常見的方法:
<img src="your_image.jpg" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;">
以上代碼可以將圖片設(shè)置為全屏背景圖。其中,position屬性設(shè)置為fixed,表示固定定位,top和left屬性設(shè)置為0,表示相對(duì)于屏幕左上角定位,width和height屬性都設(shè)置為100%,表示圖片鋪滿整個(gè)屏幕。z-index屬性設(shè)置為-1,表示將圖片的堆疊順序設(shè)置為最底層。
<img src="your_image.jpg" style="position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;">
以上代碼可以將圖片設(shè)置為全屏顯示,但不作為背景圖。其中,position屬性設(shè)置為absolute,表示絕對(duì)定位,top、left、right、bottom屬性都設(shè)置為0,表示將圖片填充整個(gè)屏幕。margin屬性設(shè)置為auto,表示使圖片在水平和垂直方向上自動(dòng)居中。
<div style="background:url(your_image.jpg) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;">
以上代碼同樣可以將圖片設(shè)置為全屏背景圖。其中,background屬性設(shè)置為圖片路徑,并設(shè)置不重復(fù),居中,固定定位。-webkit-background-size、-moz-background-size、-o-background-size和background-size屬性都設(shè)置為cover,表示圖片盡可能地占滿整個(gè)背景區(qū)域。