教程集 > CSS教程 > 经典实例 > 正文手机浏览器图片自适应高度问题解决办法

手机浏览器图片自适应高度问题解决办法

发布时间：2017-12-13 编辑：jiaochengji.com

教程集为您提供手机浏览器图片自适应高度问题解决办法等资源，欢迎您收藏本站，我们将为您提供最新的手机浏览器图片自适应高度问题解决办法资源

现在手机网站越来越多了，我们统计手机游戏也点了网站的30%左右了，今天在做手机版本网站开发时碰到一个问题就是在手机浏览器图片不能自适应高度问题了，下面我们来看解决办法。

最近做PC站点的手机版，发现一个问题，图片在手机浏览器中显示效果有问题，宽度可以自动适应了，但是高度无法自动使用，调整css也没用，后来使用PHP正则替换的方式解决了手机浏览器图片自适应高度的问题。

一般情况下，解决手机浏览器自适应宽度和高度的方式是使用如下css即可：

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

但是网页中图片的img标签是这样的：

注意到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都支持.

[关闭]