在網頁制作過程中，我們常常需要對圖片進行調整，以適應不同的布局和設計。其中一種處理方式是對圖片進行橫向拉伸，以使其更符合整體頁面的比例和排版。在這篇文章中，我們將探討如何使用CSS代碼來實現圖片橫向拉伸的效果。 首先，我們需要了解CSS中涉及到圖片縮放的兩個屬性：width和height。width屬性控制元素的寬度，而height屬性控制元素的高度。通過更改這兩個屬性的值，我們可以對圖片進行大小的調整。 要實現圖片橫向拉伸的效果，我們需要設置width屬性的值為一個較大的數值。這將使圖片在水平方向上被拉伸，從而實現更寬的效果。值得注意的是，我們需要確保圖片的寬高比例得以維持，以免出現變形或失真的情況。 以下是一個使用CSS代碼實現圖片橫向拉伸的例子：

<style>
img {
width: 120%; /* 設置圖片寬度為120% */
height: auto; /* 設置高度自適應，保持比例 */
}
</style>
<p>這是一張原始的圖片:</p>
<img src="example.jpg" alt="example" />
<p>這是應用橫向拉伸效果后的圖片:</p>
<img src="example.jpg" alt="example" style="width: 120%; height: auto;" />

通過設置img元素的width屬性為120%，我們實現了對圖片的橫向拉伸。同時，我們保留了height屬性的auto值，以確保圖片比例得以維持。 在使用CSS代碼進行圖片橫向拉伸時，我們需注意保持圖片的比例和清晰度，以有效地提升頁面的視覺效果和用戶體驗。