CSS是一種在網(wǎng)頁設(shè)計(jì)中經(jīng)常使用的樣式表語言。其中一項(xiàng)常見的需求就是如何使圖片適應(yīng)全屏。下面我們將詳細(xì)介紹如何用CSS實(shí)現(xiàn)這個(gè)效果。

img {
width: 100%;
height: auto;
}

上面的CSS代碼是使圖片適應(yīng)全屏的關(guān)鍵所在。其中，width屬性值為100%，表示圖片寬度將占據(jù)整個(gè)屏幕寬度。height屬性值為auto，表示圖片高度根據(jù)寬度自適應(yīng)縮放，以保證長寬比不會(huì)變形。

此外，我們還可以加上object-fit屬性，用于設(shè)置圖片如何適應(yīng)父容器。這個(gè)屬性有五個(gè)取值：

• fill：拉伸圖片以充滿整個(gè)容器，可能會(huì)失去原始比例。
• contain：在保持寬高比的同時(shí)，縮放圖片以適應(yīng)容器，有可能會(huì)有空白部分。
• cover：在保持寬高比的同時(shí)，縮放圖片以填滿容器，可能會(huì)超出容器范圍而被裁剪。
• none：保持原始大小，可能會(huì)超出容器范圍。
• scale-down：比contain和none兩者的尺寸更小，選擇兩者中最小的寬度和高度。

/* 填充整個(gè)容器 */
img {
width: 100%;
height: 100%;
object-fit: fill;
}

/* 縮放適應(yīng)容器 */
img {
width: 100%;
height: 100%;
object-fit: contain;
}

/* 填滿容器 */
img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* 不縮放 */
img {
object-fit: none;
}

/* 縮小到最小尺寸 */
img {
width: 100%;
height: 100%;
object-fit: scale-down;
}

以上是使用CSS使圖片適應(yīng)全屏的具體實(shí)現(xiàn)方法，根據(jù)不同情況和需求，可靈活應(yīng)用上述代碼。