欢迎来到亿搜云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

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

       经验     2016-02-17     eycms     95     0    

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

最近做PC站点的手机版,发现一个问题,图片在手机浏览器中显示效果有问题,宽度可以自动适应了,但是高度无法自动使用,调整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都支持.


--结束END--

本文链接: http://eycms.cn/station/experience/1184.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“亿搜云”
"亿搜云平台前端开发教学"
每日干货技术分享
 

×

成为 亿搜云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

亿搜云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 40819446

客服电话: 15250286283

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

亿搜云平台手机端