在Web開發中，圖片無疑是非常重要的一部分。通過HTML5和CSS設置圖片鋪滿可以大大提升網站的視覺效果和用戶體驗。下面我們聊聊如何實現圖片鋪滿。

code:  img {
width: 100%;
height: 100%;
object-fit: cover;
}

如上述代碼所示，我們可以通過CSS的width和height屬性將圖片大小設置為100%。但是如果圖片原本的長寬比與容器不同，會導致圖片變形。這時候我們就需要用到object-fit屬性了。

object-fit有5個值：

• fill – 默認值，將圖片縮放以鋪滿整個容器，不保持寬高比例。
• contain – 將圖片縮放以適應父容器，保持寬高比例
• cover – 保持長寬比例，盡可能大地填充容器
• none – 圖片不會被縮放
• scale-down – 將圖片縮放到合適的大小，不存在放大的情況

如上述代碼所示，我們使用了cover屬性。這樣可以保證圖片能夠自適應容器大小，并且保持原有長寬比例。

需要注意的是，如果圖片的長寬比例與容器的長寬比例相差甚遠，會導致圖片的某些部分無法顯示。我們可以使用background-size: cover屬性解決這個問題。

code:  .container {
background-image: url("image.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
width: 100%;
}

如上述代碼所示，我們可以將背景圖片設置為容器的背景圖片，并使用background-size: cover屬性將圖片自適應容器大小。同時，我們還需要使用background-position: center center屬性使圖片居中顯示。

綜上所述，通過HTML5和CSS設置圖片鋪滿的方法有很多。我們可以根據具體需求選擇不同的方法，提高網站的視覺效果和用戶體驗。