在網(wǎng)頁美化中，圖片是非常重要的一個元素，而 CSS 則是掌控網(wǎng)頁樣式的利器。CSS 可以將圖片進(jìn)行拉伸，但是拉伸后圖片往往會變得模糊不清，影響網(wǎng)頁的美觀程度。如何讓圖片在拉伸后依然清晰呢？下面我們就來探討一下。

img{
width: 100%;
height: auto;
max-width: 600px;
}

以上代碼將圖片的寬度設(shè)為 100% ，高度自適應(yīng)，同時加上了 max-width 屬性，限制圖片最大寬度為 600px。這個方法在保持圖片長寬比的同時讓圖片在拉伸時更清晰，因?yàn)閳D片沒有被放大超過其原始大小。

還有一種方法是給圖片添加背景，然后將其放大至原有大小，這樣圖片看起來依然清晰，代碼如下所示：

.img-box{
background: url('img-src') center/cover;
width: 100%;
height: 0;
padding-top: 50%; /* 圖片高度 = 寬度 * 圖片寬高比 */
}

以上代碼將圖片的高度設(shè)為與 padding-top 的值等比例，保持圖片長寬比的同時也讓圖片看起來更大。

總而言之，我們可以通過適當(dāng)控制圖片的大小和比例，使其在拉伸時不會模糊不清。這不僅有利于網(wǎng)頁美觀，更能提升用戶體驗(yàn)。