使用CSS使圖片拉伸 在網頁設計中，圖片是一個非常重要的元素，而有時我們需要對圖片進行拉伸操作以適應不同大小的瀏覽器窗口。在這種情況下，CSS為我們提供了一些非常有用的方法。本文將會介紹CSS如何使圖片拉伸。 首先，我們需要在HTML中添加img元素，并為其設置一個CSS類。例如： `` 然后我們使用CSS來定義這個類。使用CSS3的背景尺寸屬性（background-size），我們可以輕松地把圖片拉伸到我們需要的大小。在下面的代碼中，我們將把圖片拉伸到占滿整個屏幕。

.stretch {
width:100%;
height:100%;
background-image:url('image.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

上面的代碼意思是：設置img元素的寬度和高度為100%，并將原始圖片作為背景圖像，使用“cover”參數拉伸圖像以填充整個元素。我們還將背景位置設置為中心，以確保拉伸圖像位于中心位置，并且不重復。 如果我們需要保留圖片的高寬比例，只需要在背景尺寸屬性中使用“contain”參數，如下：

.stretch {
width:100%;
height:400px;
background-image:url('image.jpg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

在上面的代碼中，我們將高度設置為固定的400像素，并使用“contain”參數通過等比例縮放圖像，以確保圖像的高寬比例不變。 總結 使用CSS，我們可以輕松地通過拉伸和縮小圖片來適應不同大小的屏幕。無論是使用背景圖像還是img元素，我們都可以使用CSS的背景尺寸屬性來實現這個目的。當然，我們必須注意拉伸后圖片的質量，以確保圖像不失真。