HTML5 全屏圖片是一種常見的網頁布局設計，通常用于網站頁面的背景展示或者主題頁面的封面展示。這種圖片可以根據瀏覽器窗口的大小進行自適應調整，即使瀏覽器窗口大小發生改變，圖片的大小也能隨之自適應調整。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全屏圖片</title>
<style>
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.fullscreen-bg {
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fullscreen-bg__image {
width: 100%;
height: 100%;
-webkit-animation: scale 60s ease-in-out infinite;
animation: scale 60s ease-in-out infinite;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
@-webkit-keyframes scale {
0%, 100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes scale {
0%, 100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
</style>
</head>
<body>
<div class="fullscreen-bg">
<div class="fullscreen-bg__image" style="background-image: url('img/bg.jpg')"></div>
</div>
</body>
</html>上面的代碼中，我們首先給body和html設置了margin和padding為 0，同時將它們的height和width都設置為 100%。這樣就能夠使頁面占滿整個瀏覽器窗口。
接下來，我們創建一個名為fullscreen-bg的 div 元素，將它的位置設為 fixed，寬高都為 100%。這個 div 用來包裝全屏圖片，使其能夠根據瀏覽器窗口的大小自適應調整。
在fullscreen-bg中，我們又創建了一個名為fullscreen-bg__image的 div 元素，并將它的背景圖設置為url('img/bg.jpg')。這個背景圖片會通過樣式表中的background-size: cover和background-position: center可以讓圖片自適應瀏覽器窗口大小，并將圖片居中顯示。同時，我們還通過-webkit-animation和animation屬性設置了一個放大動畫效果，讓圖片更加生動有趣。
如果你想使用這種全屏圖片布局效果，只需要將代碼中的圖片鏈接改為你自己的圖片鏈接即可。如果你想要進一步了解 HTML5 的布局和樣式相關知識，可以參考一些學習資料和教程，不斷提升自己的技能和能力。