当前位置:
首页 > 建站技术应用 > div+css/javascript > 手机浏览器图片自适应高度问题解决办法

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

最近做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,可直接使用):

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;
}

原创文章,转载请注明: 转载自广州SEO

本文链接地址: 手机浏览器图片自适应高度问题解决办法

  1. 虽然王阳明在下也算了解,那也仅仅是因为读过相关著作,略有所闻。在下并不认为这是中国人必然了解的角色,文科生刚刚毕业也不一定能够背住王守仁的生卒年以及所有贡献。如果你一定要跟我狡辩,就先问问自己能不能背住“三百千”这三本中国最重要的萌学小书,如果不能,就不