解决图片在手机中显示撑破的问题

在布局页面时，有时会遇到大图片将页面容器“撑破”的情况，尤其是加载外链图片（通常是通过采集的外站的图片）。

解决办法一：

一般在后台添加图片时，编辑器会自动给图片加上style属性，例如:

<img src="1.jpg" style="width:400px;height:300px;">

那么用PHP正则表达式去除img标签中的style属性，变成：

<img src="1.jpg">

那么在手机上访问，图片就会自动适应屏幕了。 代码如下：

$str = '<img src="1.jpg" style="width:400px;height:300px;">';
$str_new = preg_replace('/(<img.*?)style=\".*?\"/i', '$1$3', $str);

但是这样做了后，图片在PC端的就会显示得非常大。

PS:去掉img标签的width,height的属性：

    $exp=Array("/height=.{0,5}\s/i","/width=.{0,5}\s/i");
    $exp_o=Array('','');
    $str = preg_replace($exp,$exp_o,$str);

解决办法二

用Jquery来检查图片是否撑破，并完成等比例缩小，代码如下：

$(function(){ 
  var w = $("#Body").width()-50;//容器宽度 
  $("#Body img").each(function(){//如果有很多图片，我们可以使用each()遍历 
    var img_w = $(this).width();//图片宽度 
    var img_h = $(this).height();//图片高度 
    if(img_w>w){//如果图片宽度超出容器宽度--要撑破了 
        var height = (w*img_h)/img_w; //高度等比缩放 
        $(this).css({"width":w,"height":height});//设置缩放后的宽度和高度 
     } 
  }); 
});