如何让图片自适应手机等移动设备屏幕大小
2016-01-07 16:18
477 查看
http://www.daqian163.com/web/461.html
在制作手机网站的时候,常常需要图片自适应手机等移动终端设备屏幕大小,实现图片自适应屏幕大小的方式可以有多种,这里青岛网站制作说一下自己所使用的js实现方法。
这里,用到了jQuery这个js框架,所以在head中需导入jQuery。比如大千手机网站的代码为:
引用完jQuery后,需要设置当图片的宽度大于多少时,就设置所要自适应屏幕大小的图片的宽度为100%,高度为100%。
代码如下:
由于我控制的只是主内容部分的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非常的好用。
在制作手机网站的时候,常常需要图片自适应手机等移动终端设备屏幕大小,实现图片自适应屏幕大小的方式可以有多种,这里青岛网站制作说一下自己所使用的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非常的好用。
相关文章推荐
- 数据库操作
- 动态适应label的高度
- 查询效率问题??
- unity3D中一些小功能的实现
- Android ComponentName的用法
- 初学编程者,从一开始就值得坚持的习惯
- convex hull 算法之一:Graham Scan凸包算法
- cookie在vs又一次run的时候丢失
- 安装oracle11g 日志报错SEVERE: [FATAL]THANKS.localdomain: THANKS.localdomain.
- Centos7:mariadb替换mysql
- 【原】内存不够时增加虚拟内存的方法
- Python中的tile函数
- Block 理解 总结 使用demo 通俗易懂
- Json.NET 序列化JSON字符串时,如何忽略值为null的成员?
- iOS 键盘遮挡问题
- 编程练习题
- 操作系统总结——处理器管理
- ubuntu 安装 swift 64位
- 沫沫金 - ADT初始环境搭建问题清单
- 转载来自简书 圆角