在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)用到圖片。但是有時(shí)候會(huì)發(fā)現(xiàn)，圖片的寬度沒(méi)有鋪滿其所在的容器，而是居中顯示了。這就需要使用 CSS 樣式來(lái)實(shí)現(xiàn)圖片寬鋪滿。

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

上述樣式代碼中，使用了 width 和 height 屬性來(lái)設(shè)置圖片的寬和高。其中，width 設(shè)置為 100%，即讓圖片寬度占滿其所在的容器；height 設(shè)置為 auto，會(huì)根據(jù)圖片的原始寬高比例，自動(dòng)計(jì)算圖片高度。

需要注意的是，如果圖片本身的寬度小于其所在容器的寬度，那么設(shè)置了 100% 寬度后，圖片也無(wú)法拉伸，仍然會(huì)保持原來(lái)的尺寸，并且默認(rèn)居中顯示。此時(shí)可以使用 object-fit 屬性來(lái)實(shí)現(xiàn)拉伸效果。

img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain */
}

其中 object-fit 設(shè)置為 cover 表示讓圖片拉伸鋪滿容器，不管圖片變形；設(shè)置為 contain 則表示保持原有寬高比例，縮放圖片直到完全放入容器為止。

使用 CSS 樣式讓圖片寬鋪滿，可以使網(wǎng)頁(yè)的視覺(jué)效果更加美觀，圖片也能更好的展示。