阿尔法PHP程序员博客

后台上传图片后，都有一个图片属性，会指定图片的宽和高，如果图片固定了宽度和高度，PC端用max-width可以控制最大宽度，高度自动缩放。但是手机端就没法自动缩放，可以使用js来改变图片的style，通过100%比例，当然也可以设置px固定的高度宽度。

下面这些代码是摘自网上，测试了下还是比较好使的，主要也是为了解决网站电脑端和手机端共用一套数据时，造成的图片变形问题，由于后台上传图片时会自动设置图片的宽高，pc端倒没什么影响，可是手机端就会导致变形，很是影响视觉效果。

当然也可以在上传的时候手动去掉图片宽和高的属性代码，但是这样操作比较麻烦，而且还会造成图片在后台编辑器中很大很大，影响编辑。

下面这些js代码，配合css代码，即可实现手机端图片正常显示效果。

html默认样式：

  <div class="news_infos" id="newsp">
          <p><img src="images/v1.jpg" style="width:300px;height:100px"></p>
        </div>

CSS：

.news_infos img { max-width: 650px;height:auto; }

js：

 <script type="text/javascript">    
      var aImg=document.getElementById("newsp").getElementsByTagName('img');
     for(var i=0;i<aImg.length;i++){
      aImg[i].style.height="100%";
      aImg[i].style.width="100%";
      }      
  </script>

或者 方法二：

 <script type="text/javascript">    
      var aImg=document.getElementById("newsp").getElementsByTagName('img');
     for(var i=0;i<aImg.length;i++){
      aImg[i].style.height="auto";
      aImg[i].style.width="auto";
      }      
  </script>

html更改后：

        <div class="news_infos" id="newsp">
          <p><img src="images/v1.jpg" style="width:100%;height:100%"></p>
        </div>

100%这个方案不是很完美，如果图片上传的大小没有超过650，那么PC端图片会被放大。还有一种解决方案就是，编辑后台内容的时候，将图片属性后面的width，height值都删掉，让css来控制就行了。同样用max-width来控制图片大小，小图＜650px，图片不会被更改，＞650px，图片宽度就是650px。，那么手机端就用100%来表示。

方法三 CSS：

.news_infos img { max-width: 650px；height:auto; }
@media only screen and (max-width: 480px) {
    .news_infos img { width：100%; }
}

这个的不好的地方就在于，每次编辑图片属性，都得删除后面的width，比较繁琐。

以上方法，都可以实现，但是100%，和设置宽度这两种方法都不完美， 如果以前图多，已经固定了宽度，建议使用方法二