移动前端开发-解决手机浏览器图片自适应高度问题


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

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

  1. .content img{  
  2.   max-width:100%;  
  3.   height:auto;  
  4. }  

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

  1. <img alt="大家学分享站" src="http://www.www.lwxshow.com/upload/2014/06/20140606063027270.jpg" style="height: 337px; width: 600px;">  

注意到img标签里面style属性定义了height高度,这样css就无法重写样式。

所以想到用PHP在页面输出的时候去掉img标签中height的CSS定义,代码如下:

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

这样替换之后img标签变成这样:

大家学分享站
OK,图片可以在手机浏览器中自适应宽高度了。

为什么会这样呢?因为宽度很好说,是手机屏幕的宽度,可以定义max-width来解决,但是高度并不能自动按比例缩小,高度用max-height是手机屏幕的高度,所以img标签定义了高度就无法更改了。

除此之外还可以用jQuery或者原生js,重写img标签里的CSS应该也行。

声明:大家学-卢卫湘|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 移动前端开发-解决手机浏览器图片自适应高度问题


加vx: beyonds 备注:app上架 lwxshow