CSS調整圖片鋪滿屏幕

在Web開發中，經常需要調整圖片的尺寸適應屏幕大小，使圖片能夠鋪滿整個頁面，從而提高用戶體驗。本文將介紹如何使用CSS調整圖片的尺寸，實現鋪滿屏幕的效果。

1. 設置圖片的寬度和高度

img {
width: 100%;  /* 設置寬度為100% */
height: auto; /* 設置高度自動調整 */
}

上述代碼將圖片的寬度設置為100%，并使用height:auto自動調整高度。該方法可以確保圖片寬度始終等于設備寬度，高度按比例縮放。

2. 使用object-fit屬性

img {
width: 100%;      /* 設置寬度為100% */
height: 100%;     /* 設置高度為100% */
object-fit: cover; /* 設置圖片填充方式為覆蓋 */
}

上述代碼將圖片的寬度和高度都設置為100%，并使用object-fit: cover屬性指定圖片填充方式為覆蓋。該方法能夠確保圖片鋪滿整個屏幕并保持原有比例。

3. 使用background-image屬性

body {
background-image: url("image.jpg"); /* 設置背景圖片 */
background-size: cover;             /* 設置背景圖片填充方式為覆蓋 */
background-position: center;        /* 設置背景圖片居中顯示 */
}

上述代碼將圖片設置為body元素的背景圖片，并使用background-size: cover屬性指定填充方式為覆蓋。該方法能夠確保圖片鋪滿整個屏幕并保持原有比例。

總結

以上三種方法均可實現圖片鋪滿整個屏幕的效果。具體選擇哪種方法，需要根據具體的業務場景進行選擇。使用寬度和高度控制時，需要注意比例失衡的問題；使用background-image屬性時，需要注意優化圖片大小和提高頁面性能。