通過 CSS 控制圖片在網頁中的顯示，可以使其擁有更為豐富的樣式和更好的用戶體驗。本文將介紹如何利用 CSS 控制圖片在網頁中的樣式。 首先，我們需要為圖片設置一個容器，例如 DIV 標簽，并為其設置寬度和高度。 ```html``` ```css .image-container { width: 500px; height: 300px; } ``` 在上面的例子中，我們設置了一個名為 `image-container` 的 DIV 容器，并為其設置了寬度和高度。接下來，我們需要為其中的圖片設置樣式。 1. 調整圖片大小 ```css .image-container img { width: 100%; height: auto; } ``` 上述代碼中，我們選擇了 `image-container` 中的圖片，使用 CSS 設置其寬度為 100%，高度自適應。這樣，圖片就可以在容器中自適應大小，適應不同的屏幕尺寸。 2. 垂直和水平居中 ```css .image-container { display: flex; align-items: center; justify-content: center; } ``` 上述代碼中，我們為容器設置了彈性布局，并使用 `align-items` 和 `justify-content` 屬性將圖片垂直和水平居中。 3. 設置邊框和圓角 ```css .image-container img { border: 1px solid #ccc; border-radius: 5px; } ``` 上述代碼中，我們為圖片設置了邊框為 1px 的灰色實線，以及 5px 的圓角。 總結：通過 CSS 控制圖片的樣式，可以使其更為美觀，并提高用戶體驗。我們可以使用 CSS 控制圖片的大小、居中、邊框、圓角等樣式，以及配合其他布局技巧，使其更好地融入網頁。