如何让图片自适应手机等移动设备屏幕大小

http://www.daqian163.com/web/461.html

在制作手机网站的时候，常常需要图片自适应手机等移动终端设备屏幕大小，实现图片自适应屏幕大小的方式可以有多种，这里青岛网站制作说一下自己所使用的js实现方法。

这里，用到了jQuery这个js框架，所以在head中需导入jQuery。比如大千手机网站的代码为：

<script src="/mobile/js/jquery.min.js" type="text/javascript"></script>

引用完jQuery后，需要设置当图片的宽度大于多少时，就设置所要自适应屏幕大小的图片的宽度为100%，高度为100%。

代码如下：

<script type="text/javascript">// <![CDATA[
$(document).ready(function()
{ 
 $("#maincontent img").attr("width","100%");
 $("#maincontent img").attr("height","100%");
});
// ]]>
</script>

由于我控制的只是主内容部分的div中的图片，所以需要用jQuery获取div的id为maincontent的div，$(“#maincontent img”)的意思是获取此div中的所有img，然后设置其宽度为100%，高度为100%，这样所有主要内容部分的img图片都是自适应屏幕大小的。

或者你也可以设置图片宽度、高度为固定的值的大小，但是那样你设置完图片宽度大小后，还得根据现图片宽度计算同比例缩小图片后的高度，那样麻烦许多，就懒得弄了，干脆全部都设置成100%，这样也没什么不妥的。

比如大千手机站的这个页面：http://m.daqian163.com/productsdetail.php?id=231&cat=6，当用谷歌浏览器模仿iPhone 6手机访问页面时，所显示大自适应手机屏幕效果：

 

当然，实现图片自适应屏幕大小的方式还有其它方法，只是青岛网站建设觉得这个js非常的好用。

 

转载于:https://www.cnblogs.com/zhangjingyun/p/5110262.html