在網頁設計中，圖片是一個非常重要的元素。合理控制圖片的大小和比例，可以讓網頁看起來更加美觀和整潔。CSS作為一種樣式指令語言，可以幫助我們精確地控制圖片大小和比例。下面我們來看一下如何使用CSS控制圖片的橫向百分比。 首先，在HTML頁面中插入一張圖片，使用img標簽，如下所示：

<img src="img/pic.jpg" alt="美麗的風景圖片">

接下來，在CSS中使用width屬性，來控制圖片的橫向百分比。例如，我們要將圖片的寬度設置為頁面寬度的50%，代碼如下所示：

p img{ width:50%; }

這里的p是指使用該樣式的元素為p標簽下的圖片。在使用該樣式的p標簽內，所有的圖片寬度都會被設置為頁面寬度的50%。 如果我們只想要控制某一張圖片的寬度，可以為其添加一個類，如下所示：

<img src="img/pic.jpg" alt="美麗的風景圖片" class="pic">
.pig{
width:50%;
}

這里的.pic類用于選擇指定的圖片，對其進行樣式設置。使用該樣式的圖片寬度都會被設置為50%。 最后，我們可以通過CSS的max-width屬性來保證圖片不會超出父元素的寬度，代碼如下所示：

<style type="text/css">
p img{
max-width:100%;
height:auto;
}
</style>

max-width屬性的值為100%，表示圖片的寬度不能超過父元素的寬度。同時，為了保證圖片的比例不會失真，我們還需要設置height屬性為auto，這樣圖片的高度會根據寬度進行自適應調整。 以上就是如何使用CSS控制圖片橫向百分比的方法。通過合理的樣式設置，可以讓圖片在網頁中更加美觀和協調。