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

最近做PC站點的手機版，發(fā)現(xiàn)一個問題，圖片在手機瀏覽器中顯示效果有問題，寬度可以自動適應了，但是高度無法自動使用，調整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都支持.