CSS播放圖片尺寸是Web開發中一個常見的問題。在網頁中使用圖片可以為用戶提供更好的視覺體驗，而CSS則可以控制圖片的尺寸和布局。下面我們將了解如何使用CSS來控制圖片尺寸。

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

在上面的CSS代碼中，我們使用了width和height屬性來控制圖片的尺寸。其中，width屬性設置圖片的寬度為100%，使其能夠鋪滿整個容器。這樣可以確保圖片在不同大小的屏幕上都有良好的表現。另外，height屬性設置為auto表示讓瀏覽器自動計算圖片的高度，確保圖片不會失真或被拉伸。

此外，我們也可以使用max-width和max-height屬性來限制圖片的最大尺寸。例如：

img {
max-width: 100%;
max-height: 300px;
}

在這個例子中，max-width屬性限制了圖片的最大寬度為100%。如果圖片本身的尺寸比容器小，那么它會根據容器的大小進行自適應。另外，max-height屬性限制了圖片的最大高度為300px。

CSS還可以用來控制圖片的布局，例如讓圖片居中、左對齊或右對齊等。這需要使用text-align和margin屬性。例如：

.center img {
display: block;
margin: 0 auto;
text-align: center;
}
.left img {
float: left;
margin-right: 10px;
}
.right img {
float: right;
margin-left: 10px;
}

在這個例子中，center類讓圖片居中顯示，left類讓圖片左對齊并在右側留出10像素的空白，而right類則讓圖片右對齊并在左側留出10像素的空白。

綜上所述，CSS提供了豐富的控制圖片尺寸和布局的方法，可以讓我們更好地展示網頁內容并提供更好的用戶體驗。