在網頁設計中，圖片是很重要的一個元素。而如何讓圖片在不同設備上都能得到良好的顯示效果，就需要用到 CSS 的兼容性問題。

要實現圖片 CSS 在電腦和手機上的兼容，主要有以下幾個方面需要考慮：

img {
max-width: 100%;
}

1. 圖片寬度的自適應：為了讓圖片能夠適應不同設備的分辨率，需要為圖片設置一個合適的最大寬度。一般情況下，使用 max-width: 100%; 就可以滿足要求了。

@media screen and (max-width:480px) {
img {
max-width: 100%;
height: auto;
}
}

2. 響應式設計：為了讓網站在不同屏幕尺寸下都能夠獲得好的用戶體驗，需要使用響應式設計。在 CSS 中，可以通過媒體查詢來實現針對不同屏幕寬度的樣式設置。上方 pre 標簽代碼實現了圖片在移動設備上自適應寬度和高度。

img {
display: block;
margin: 0 auto;
}

3. 圖片居中顯示：為了讓頁面看起來更加美觀，一些圖片需要居中顯示。可以通過設置 margin 屬性來實現。上方 pre 標簽代碼實現了圖片在父容器中居中顯示。

需要注意的是，針對不同設備的 CSS 樣式需要通過媒體查詢來實現，例如針對移動設備的樣式需要使用 @media screen and (max-width:480px)。同時，也可以通過響應式設計框架來快速實現圖片等元素在多種設備上的兼容性。

總之，圖片 CSS 在不同設備上的兼容是網頁設計中必須牢記的一點。不僅能夠提升用戶體驗，還能讓網站在搜索引擎中獲得更好的搜索排名。