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

最近做PC站點(diǎn)的手機(jī)版，發(fā)現(xiàn)一個(gè)問題，圖片在手機(jī)瀏覽器中顯示效果有問題，寬度可以自動(dòng)適應(yīng)了，但是高度無法自動(dòng)使用，調(diào)整css也沒用，后來使用PHP正則替換的方式解決了手機(jī)瀏覽器圖片自適應(yīng)高度的問題。

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

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

但是網(wǎng)頁中圖片的img標(biāo)簽是這樣的：

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

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

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

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

這樣替換之后img標(biāo)簽變成這樣：

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

為什么會(huì)這樣呢？因?yàn)閷挾群芎谜f，是手機(jī)屏幕的寬度，可以定義max-width來解決，但是高度并不能自動(dòng)按比例縮小，高度用max-height是手機(jī)屏幕的高度，所以img標(biāo)簽定義了高度就無法更改了。

除此之外還可以用jQuery或者原生js，重寫img標(biāo)簽里的CSS應(yīng)該也行。

后來有朋友這樣說的

手機(jī)瀏覽器(移動(dòng)站點(diǎn))圖片自適應(yīng)的css代碼:

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

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