CSS設置圖片比例是網頁設計中非常重要的一部分，因為不同的圖片比例可以為網頁帶來不同的視覺效果。接下來我們就來介紹一下如何使用CSS設置圖片比例。

首先，在HTML中插入一張圖片，代碼如下：

<img src="example.jpg" alt="Example">

在這個例子中，我們插入了一個名為example.jpg的圖片，還添加了一個alt屬性，該屬性可以提供圖片的替代文本，這對于訪問性很重要。

然后我們可以使用CSS來設置圖片的比例，在CSS中我們可以為img元素添加width和height屬性，并對其進行設置。例如，我們可以將寬度設置為50%：

img {
width: 50%;
height: auto;
}

在這個例子中，我們將寬度設置為50%，并將高度設置為自動，這樣就可以保持圖片的比例不變，使其適應屏幕大小。

另外，我們也可以將圖片的高度設置為一個具體的像素值，而將寬度設置為自動：

img {
width: auto;
height: 200px;
}

在這個例子中，我們將高度設置為200像素，而將寬度設置為自動，這樣可以使圖片適應高度，同時保持自身的比例不變。

總結：

CSS設置圖片比例非常重要，在網頁設計中起著至關重要的作用，可以為網頁帶來不同的視覺效果。我們可以使用width和height屬性來設置圖片的比例，使其適應屏幕大小，同時保持自身的比例不變。