在前端開發中，經常需要用到圖片，而圖片的尺寸大小不同，如果不進行處理，容易導致頁面的布局混亂。那么如何讓圖片水平自適應，適應頁面的布局呢？

這時候，我們就需要使用 CSS 來對圖片進行處理。下面是一段 CSS 代碼，用于讓圖片水平自適應：

img{
max-width: 100%;
}

上面的代碼非常簡單，我們只需要對圖片設置最大寬度為100%，就可以讓圖片自適應頁面的寬度，不會超過頁面的邊界，同時也不會變形。

需要注意的是，這段代碼只對直接放在 img 標簽中的圖片生效，若是通過背景圖的方式展示的圖片，需要用到 background-size 屬性來進行適應：

div{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
}

在上面的代碼中，我們通過 background-image 屬性設置了背景圖片，background-repeat 屬性用于防止圖片重復。而 background-size 屬性則可以控制圖片的大小，cover 值表示讓背景圖片充滿整個容器，同時保持比例不變。

以上就是關于 CSS 圖片水平自適應的簡單介紹。通過合適的 CSS 樣式，可以讓頁面的圖片達到更好的展示效果。