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

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

解决办法一:

一般在后台添加图片时,编辑器会自动给图片加上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});//设置缩放后的宽度和高度 
     } 
  }); 
}); 

 

发表评论

邮箱地址不会被公开。 必填项已用*标注