原文:http://www.open-open.com/code/view/1420975773093

  <script type="text/javascript">
window.onload = function() {
var w = 500;//设置最大宽度,也可根据img的外部容器 而动态获得,比如:$("#demo").width();
$("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
});//设置缩放后的宽度和高度
}
}); }
$(document).ready(function() {
//就本例而言 不要用 jQuery中的ready 你懂的...
})
</script>

用 jQuery实现图片等比例缩放大小的更多相关文章

  1. C#图片按比例缩放

    C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...

  2. 理解CSS3中的background-size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  3. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

  4. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  5. 让ie6也支持max-width,和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. (转载)让ie6也支持max-width,和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  8. 微信小程序学习点滴《十二》:图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...

  9. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

随机推荐

  1. vue-router介绍及简单使用

    一.vue-router介绍 vue-router是vue官方提供的一个路由框架,控制页面路由,使用较为方便. 1.路由模式 hash(浏览器环境默认值),使用 URL hash 值来作路由,支持所有 ...

  2. HDU - 4811 - Ball (思维)

    题意: 给出一定数量的三种颜色的球,计算如何摆放得到值最大(有一定顺序) 有三种摆放方法 1.如果放的是第一个(桌子上原来没有),数值不变 2.如果在末尾追加一个,那么增加前面不同颜色的个数的值 3. ...

  3. 2018 CCF NOIP提高组&&普及组答案

    答案: 这是今年的答案大家觉得能进到复赛吗? 下一篇文章将会为大家推荐我自己出的复赛题!!!

  4. MySQL的索引知识

    一.什么是索引. 索引是用来加速查询的技术的选择之一,在通常情况下,造成查询速度差异 的因素就是索引是否使用得当.当我们没有对数据表的某一字段段或者多个 字段添加索引时,实际上执行的全表扫描操作,效率 ...

  5. WINDOWS下使用Mysql 中碰到的问题记录

    问题:在cmd中输入net stop mysql反馈“服务名无效” win+R打开运行窗口,输入 services.msc 查看其中mysql的服务名,比如我的是叫做MySQL80 让我们继续回到最开 ...

  6. (31)zabbix Aggregate checks聚合检测

    概述 aggregate checks是一个聚合的检测,例如我想知道某个组的host负载平均值,硬盘剩余总量,或者某几台机器的这些数据,简单的说,这个方法就是用来了解一个整体水平,而不需要我们一台台看 ...

  7. XML,面向对象基础

    什么是XML XML与JSON的对比 XML文档格式 使用XML模块解析 一,什么是XML ''' XML 全称可扩展标记语言 <tag></tag> 双标签 <tag/ ...

  8. 00032_ArrayList集合的遍历

    1.通过集合遍历,得到集合中每个元素,这是集合中最常见的操作 2.集合的遍历与数组的遍历很像,都是通过索引的方式 public class ArrayListDemo02 { public stati ...

  9. Java-使用哈希码比较对象的值

    在一些特殊的情况下使用 package com.tj; import java.io.File; public class MyHash { public static void main(Strin ...

  10. android 之 ListView相关

    ListView是一种列表视图,其将ListAdapter所提供的各个控件显示在一个垂直且可滚动的列表中.需要注意的为创建适配器并将其设置给ListView. 1.ArrayAdapter Array ...