CSS圖片映射是前端開發中非常重要的一部分，它可以為網站的圖片設置一個坐標，使得圖片可以自適應網頁的響應式布局，更好地展示給用戶。

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

一般來說，我們會為圖片設置一個預設的尺寸，在CSS中，可以使用width和height屬性來實現。通過將width設置為100%，height設置為auto，可以讓圖片根據容器的尺寸自適應大小。

.map {
position: relative;
}
.map img {
position: absolute;
top: 0;
left: 0;
}

為圖片設置坐標需要將圖片的position屬性設置為absolute，并且將其容器的position屬性設置為relative。通過設置top和left屬性，可以為圖片設置一個位置。這樣做可以實現圖片的定位，讓圖片在網頁中任意位置。

.map img:hover {
opacity: 0.5;
}

通過CSS可以為圖片實現鼠標懸停效果。在:hover偽類中，設置一個opacity屬性，使得圖片在鼠標懸停時透明度變為0.5。

CSS圖片映射可以為網站的圖片增加很多效果，優化用戶的瀏覽體驗。通過學習預設圖片尺寸、映射圖片坐標、鼠標懸停效果等知識，可以更好地進行前端開發。