<script type="text/javascript">
$(function () {
var w = $(".content-co").width(); //容器宽度
$(".content-co 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 }); //设置缩放后的宽度和高度
}
});
}); </script>

手机网站中 限制图片宽度 JS图片等比例缩放的更多相关文章

  1. rem单位在手机网站中的使用

    em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...

  2. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  3. 纯JS实现图片预览与等比例缩放和居中

    最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTM ...

  4. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  5. ios 图片处理( 1.按比例缩放 2.指定宽度按比例缩放

    本文转载至 http://blog.sina.com.cn/s/blog_6f29e81f0101tat6.html //按比例缩放,size 是你要把图显示到 多大区域 CGSizeMake(300 ...

  6. 图片 css剪切,等比例缩放

    object-fit: cover; .img1 {//自定义图片宽高,并且等比例缩放 width: 200px; height: 400px; object-fit: cover; }

  7. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

  8. Spring Boot中静态资源(JS, 图片)等应该放在什么位置

    Spring Boot的静态资源,比如图片应该放在什么位置呢, 如果你放在传统WEB共的类似地方, 比如webapp或者WEB-INF下,你会得到一张示意文件未找到的破碎图片.那应该放哪里呢? 百度一 ...

  9. SharePoint 网站中定义的页面背景图片不起作用

    If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS clas ...

随机推荐

  1. SVN是什么,svn的目录结构

    Svn是一个离线的代码管理,可以多个人一起修改,然后再将修改的内容提交到Svn中.每一个svn服务器中的数据存储单位叫做存储,但是你不仅仅可以把整个存储当作你维护的内容,也可以将其中的某个分支目录像根 ...

  2. 一元线性回归模型与最小二乘法及其C++实现

    原文:http://blog.csdn.net/qll125596718/article/details/8248249 监督学习中,如果预测的变量是离散的,我们称其为分类(如决策树,支持向量机等), ...

  3. Python_爬虫3

    正则表达式 在前面我们已经搞定了怎样获取页面的内容,不过还差一步,这么多杂乱的代码夹杂文字我们怎样把它提取出来整理呢?下面就开始介绍一个十分强大的工具,正则表达式! 1.了解正则表达式 正则表达式是对 ...

  4. discuz pc端显示触摸版

    1./source/function/function_core.php function checkmobile() {return true; //此为加上的内容global $_G; ..... ...

  5. 下了个C-Free,结果点新建,出来的就是.cpp 怎么变成.c呢。。。他默认新建文件是c++的啊,

    C-Free主界面--->工具--->环境选择--->一般--->“新建文件类型”将cpp改成c即可

  6. [iOS 10 day by day] Day 1:开发 iMessage 的第三方插件

    本文介绍了 iOS 10 的一个重要更新:Messages 应用支持第三方插件了.作者用一个小游戏作为例子,说明了插件开发从建工程开始,到绘制界面.收发消息的全过程. <iOS 10 day b ...

  7. NSFileManager文件管理

    前提,用到的东东: 1.文件数据类:NSData类型(二进制) 1)作用:专门用于将数据封装成二进制的类.数据(文本,图片,音频,视频....)  ==> NSData类型的对象 2)编码方式: ...

  8. android-ramdisk.img分析、recovery.img&boot.img执行过程

    转载请注明来源:cuixiaolei的技术博客 一.ramdisk介绍 ramdisk通过直面意思就大概能理解意思,ram disk虚拟内存盘,将ram模拟成硬盘来使用的文件系统.对于传统的磁盘文件系 ...

  9. 信号量和PV操作写出Bakery算法的同步程序

    面包店烹制面包及蛋糕,由n个销售员卖出.当有顾客进店购买面包或蛋糕时,应先在取号机上取号,然后等待叫号,若有销售员空闲时便叫下一号,试用信号量和PV操作写出Bakery算法的同步程序. 设计要求 1) ...

  10. python(1) - 变量小测试

    下面看一道题目: a = 3 b = a a = 5 print(a,b) 程序最后输出的a,b值分别是多少呢? 先想一想,然后我们执行一下看看正确答案: 正确答案 a 的值是5, b的值是3,为什么 ...