圖像在現代設計中扮演著重要的角色。通過CSS屬性，我們可以控制圖像的尺寸、位置和樣式。

img {
width: 50%; /* 圖像寬度為容器的50% */
height: auto; /* 等比例縮放 */
display: block; /* 將圖像設置為塊級元素，從而使得其他元素可以與之垂直排列 */
margin: 0 auto; /* 居中 */
border: 1px solid black; /* 邊框樣式 */
}

這段CSS代碼將圖像的寬度設置為父容器的50%，通過設置高度為auto，確保圖像等比例縮放，從而不會失真。通過將圖像設置為塊級元素，我們保證其他元素可以垂直排列。margin: 0 auto 居中圖像。最后，使用border屬性來定義圖像的邊框樣式。

CSS的其他屬性，例如filter和transform，可以讓我們對圖像實現更炫酷的效果。

img:hover {
filter: grayscale(100%);
transform: rotate(180deg);
}

這段代碼使用:hover偽類，當鼠標懸停到圖像上時，將圖片中的顏色轉換成灰色。同時，使用transform屬性將圖片旋轉180度。

在設計中，圖像通常不是孤立的元素，它會與其他元素共同構成頁面。使用CSS屬性，我們可以精確地調整圖像在頁面中的位置和大小。