現在手機網站越來越多了，我們統計手機游戲也點了網站的30%左右了，今天在做手機版本網站開發時碰到一個問題就是在手機瀏覽器圖片不能自適應高度問題了，下面我們來看解決辦法。

最近做PC站點的手機版，發現一個問題，圖片在手機瀏覽器中顯示效果有問題，寬度可以自動適應了，但是高度無法自動使用，調整css也沒用，后來使用PHP正則替換的方式解決了手機瀏覽器圖片自適應高度的問題。

一般情況下，解決手機瀏覽器自適應寬度和高度的方式是使用如下css即可：

.content img{
  max-width:100%;
  height:auto;
}

但是網頁中圖片的img標簽是這樣的：

<img alt="湖北省第25屆攝影藝術展" src="h/20140606063027270.jpg" style="height: 337px; width: 600px;">

注意到img標簽里面style屬性定義了height高度，這樣css就無法重寫樣式。

所以想到用PHP在頁面輸出的時候去掉img標簽中height的CSS定義，代碼如下：

$content = preg_replace('/([^>]*)(height: [0-9]+px;)([^<>]*)/i', '$1$3', $content);

這樣替換之后img標簽變成這樣：

<img alt="湖北省第25屆攝影藝術展" src="/20140606063027270.jpg" style=" width: 600px;">
OK，圖片可以在手機瀏覽器中自適應寬高度了。

為什么會這樣呢？因為寬度很好說，是手機屏幕的寬度，可以定義max-width來解決，但是高度并不能自動按比例縮小，高度用max-height是手機屏幕的高度，所以img標簽定義了高度就無法更改了。

除此之外還可以用jQuery或者原生js，重寫img標簽里的CSS應該也行。

后來有朋友這樣說的

手機瀏覽器(移動站點)圖片自適應的css代碼:

img{max-width: 100%;height: auto;width: auto\9;}

用max-width設置如果圖片尺寸大于當前瀏覽器尺寸就自動縮放, 圖片的高度設置正比縮放, 但是ie8有個比較二的bug就是不支持max-width屬性, 而ie7和ie9都支持.