<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. yii user 组件

    yii/web/user enableAutoLogin:如果未登录,则会从cookie中登录 autoRenewCookie: 如果登录了,则会使用renewIdentityCookie更新cook ...

  2. Xcode无法设置视图的 autosizing control原因

    转自:Xcode无法设置视图的 autosizing control原因 学习Xcode的iOS编程时,可能会发现Autosizing Control不见了,其原因很简单,因为你在设置中选择了Auto ...

  3. 如何通过VIM把代码格式化后生成HTML网页代码

    本文转自http://wangxiaoyu.blog.51cto.com/922065/203471 需求及思路:演示需要,需要网站上嵌入一些代码,我的建议做法是根据代码文件,生成相应的HTML代码, ...

  4. css笔记14:css文件之间可以相互引用

    css文件之间相互引用是通过@import指令完成的 格式: @import  url("被引用的css文件"); 顺便说一句,如果希望在html或者php文件中引用某个xxx.c ...

  5. 故事板 — 视图切换(segue)与传值

    1.传值问题:为什么不能给控件的接口赋值 如执行Segue跳转 [self performSegueWithIdentifier:GAPlayeVideo sender:gaVideo]; //在跳转 ...

  6. [转]Install Windows Server 2012 in VMware Workstation

    本文转自:http://kb4you.wordpress.com/2012/06/28/install-windows-server-2012-in-vmware-workstation-2/ Thi ...

  7. [改善Java代码]注意Class类的特殊性

    Java语言是先把Java源文件编译成后缀为class的字节码文件,然后再通过ClassLoader机制把这些类文件加载到内存中,最后生成实例执行的,这是Java处理的基本机制,但加载到内存中的数据是 ...

  8. linux 第一次获得root权限

    开机进入桌面,ctrl+alt+T打开终端————在此时终端显示的是 用户名@电脑名:-$   表示普通用户   在此处输入:sudo passwd root   此时提示———— [sudo] pa ...

  9. cogs 餐巾 461(贪心)

    /*虽然这暴力剪了又剪 改了又改 还是初始的20分...*/ #include<iostream> #include<cstdio> #include<cstring&g ...

  10. show/hide

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...