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

最近做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标签变成这样：
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都支持.

1.去掉图片的宽高，去掉DIV的style样式

/*PHP正则提取图片img标记中的任意属性*/
$str = '

';
//去掉图片宽度
$search = '/(<img.*?)width=(["\'])?.*?(?(2)\2|\s)([^>]+>)/is';
//去掉图片高度
$search1 = '/(<img.*?)height=(["\'])?.*?(?(2)\2|\s)([^>]+>)/is';
$content = preg_replace($search,'$1$3',$str);
$content = preg_replace($search1,'$1$3',$content);
//去掉div的style
$content = preg_replace("/style=.+?['|\"]/i",'',$content);//这种方式很简单易懂，但因为太简单，不知道有没有漏洞，否则去掉图片的宽高也用这种方法写了
highlight_string($content);
?>

2.如何用php正则去掉得到img标签中的 属性
请问PHP正则如何去掉得到img标签中的 border属性,例如：   替换后的 

一开始我就想到要 只去掉border="" 很简单的写出

1 $search = '/(<img.*?)(border=".*?")([^>]+\/?>)/is';
它只能去掉形如这样的border，一般的 标签会有这样几种含有boder的情况

也就是有符合w3c标准的双引号，还有不符合w3c标准单引号，无引号的情况。想要把他们的border也去掉

于是改成以下的正则：

1 $search = '/(<img.*?)border=(["\']).*?\2([^>]+>)/is';
此正则只能解决有单、双引号的border，暂时没有解决无引号的

回去翻了以前的文章《获取链接标签。从Snoopy类中提取函数》

看了正则还支持三目运算： (xxx)? (?(分组号) yyy|zzz) 如果xxx不为空 执行yyy，否则执行zzzz

于是改成了此完美最终版本：

1 $search = '/(<img.*?)border=(["\'])?.*?(?(2)\2|\s)([^>]+>)/is';
终于解决问题了，上一个php例子吧

01 02 //php过滤img标签中的 border属性
03 $str = '
04 1、
05 2、
06 3、
07 ';
08 $search = '/(<img.*?)border=(["\'])?.*?(?(2)\2|\s)([^>]+>)/is';
09 $r = preg_replace($search,'$1$3',$str);
10 highlight_string($r);
11
12 //输出:
13 /*
14 1、
15 2、
16 3、
17 */
18 ?>
过滤后只是多了一个空格，也不要紧了，已经解决问题了。

3.PHP正则提取或替换img标记属性
03 /*PHP正则提取图片img标记中的任意属性*/
04 $str = '

PHP正则提取或更改图片img标记中的任意属性';
05
06 //1、取整个图片代码
07 preg_match('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i',$str,$match);
08 echo $match[0];
09
10 //2、取width
11 preg_match('/<img.+(width=\"?\d*\"?).+>/i',$str,$match);
12 echo $match[1];
13
14 //3、取height
15 preg_match('/<img.+(height=\"?\d*\"?).+>/i',$str,$match);
16 echo $match[1];
17
18 //4、取src
19 preg_match('/<img.+src=\"?(.+\.(jpg|gif|bmp|bnp|png))\"?.+>/i',$str,$match);
20 echo $match[1];
21
22 /*PHP正则替换图片img标记中的任意属性*/
23 //1、将src="http://cdn.qilatu.com/wp-content/uploads/2016/10/067d3373021eb02330ee03ca862b17a5.jpg" alt="手机浏览器图片自适应高度问题解决办法"替换为src="/uploads/uc/images/20100516000.jpg" alt="手机浏览器图片自适应高度问题解决办法")
24 print preg_replace('/(<img.+src=\"?.+)(images\/)(.+\.(jpg|gif|bmp|bnp|png)\"?.+>)/i',"\${1}uc/images/\${3}",$str);
25 echo "

---

";
26
27 //2、将src="http://cdn.qilatu.com/wp-content/uploads/2016/10/067d3373021eb02330ee03ca862b17a5.jpg" alt="手机浏览器图片自适应高度问题解决办法"替换为src="/uploads/uc/images/20100516000.jpg" alt="手机浏览器图片自适应高度问题解决办法",并省去宽和高
28 print preg_replace('/(<img).+(src=\"?.+)images\/(.+\.(jpg|gif|bmp|bnp|png)\"?).+>/i',"\${1} \${2}uc/images/\${3}>",$str);
29
30 ?>
4.清除html格式,去除html、css、js格式
strip_tags($str) 去掉 HTML 及 PHP 的标记
语法: string strip_tags(string str);
传回值: 字串
函式种类: 资料处理
内容说明 :
解析：本函式可去掉字串中包含的任何 HTML 及 PHP 的标记字串。若是字串的 HTML 及 PHP 标签原来就有错，例如少了大于的符号，则也会传回错误。而本函式和 fgetss() 有着相同的功能

PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了
经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。

PHP清除html、css、js格式并去除空格的PHP函数

function cutstr_html($string, $sublen)
{
$string = strip_tags($string);
$string = preg_replace ('/\n/is', '', $string);
$string = preg_replace ('/ |　/is', '', $string);
$string = preg_replace ('/ /is', '', $string);

preg_match_all("/[\x01-\x7f]|[\xc2-\xdf][\x80-\xbf]|\xe0[\xa0-\xbf][\x80-\xbf]|[\xe1-\xef][\x80-\xbf][\x80-\xbf]|\xf0[\x90-\xbf][\x80-\xbf][\x80-\xbf]|[\xf1-\xf7][\x80-\xbf][\x80-\xbf][\x80-\xbf]/", $string, $t_string);
if(count($t_string[0]) - 0 > $sublen) $string = join('', array_slice($t_string[0], 0, $sublen))."…";
else $string = join('', array_slice($t_string[0], 0, $sublen));

return $string;
}
解析：这个函数既有去除html标签、css样式、js、空格等格式的功能(格式化html文本)也有截取字符串的功能。
htmlspecialchars 将特殊字元转成 HTML 格式
语法: string htmlspecialchars(string string);
传回值: 字串
函式种类: 资料处理
内容说明
解析：本函式将特殊字元转成 HTML 的字串格式 ( &....; )。最常用到的场合可能就是处理客户留言的留言版了。
& (和) 转成 &
" (双引号) 转成 "
< (小于) 转成 <  > (大于) 转成 >
此函式只转换上面的特殊字元，并不会全部转换成 HTML 所定的 ASCII 转换。

使用范例

Restaurant Description

Name of restaurant:

输入描述 (若您会 HTML，可直接使用):
<?echo HTMLSpecialChars($descript);?>

htmlentities 将所有的字元都转成 HTML 字串
语法: string htmlentities(string string);
传回值: 字串
函式种类: 资料处理
内容说明
解析：本函式有点像 htmlspecialchars() 函式，但本函式会将所有 string 的字元都转成 HTML 的特殊字集字串。不过在转换后阅读网页原始码的方面，会有很多困扰，尤其是网页原始码的中文字会变得不知所云，浏览器上看到的还是正常的。
php 去除html标签 js 和 css样式 - 最爱用的一个PHP清楚html格式函数

Function ClearHtml($content) {
$content = preg_replace("/<a[^>]*>/i", "", $content);
$content = preg_replace("/<\/a>/i", "", $content);
$content = preg_replace("/<div[^>]*>/i", "", $content);
$content = preg_replace("/<\/div>/i", "", $content);
$content = preg_replace("//i", "", $content);//注释内容
$content = preg_replace("/style=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/class=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/id=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/lang=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/width=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/height=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/border=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/face=.+?['|\"]/i",'',$content);//去除样式
$content = preg_replace("/face=.+?['|\"]/",'',$content);//去除样式只允许小写正则匹配没有带 i 参数
return $content;
}