(function($){
$.fn.resizeimage = function(){
var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};
var original = {
width:$(window).width()
};
return this.each(function(i,dom){
var image = $(this);
imgLoad(image.attr('src'),function(){
var img = {
width:image.width(),
height:image.height()
},percentage=;
if(img.width<original.width){
percentage = ;
}else{
percentage = (original.width)/img.width;
}
image.width(img.w=img.width*percentage-).height(img.h=img.height*percentage);
$(window).resize(function(){
var w = $(this).width();
percentage = w/img.width>?:w/img.width;
var newWidth = img.width*percentage-;
var newHeight = img.height*percentage;
image.width(newWidth).height(newHeight);
});
});
});
};
})(jQuery);

使用方法:

$('img').resizeimage();

Jquery让图片根据浏览器窗口大小自动缩放的更多相关文章

  1. Android代码中动态设置图片的大小(自动缩放),位置

    项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...

  2. Jquery实现图片左右滚动(自动)

    <!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...

  3. mui 浏览器一样自动缩放

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jquery如何监听浏览器窗口大小并根据不同的大小输出不同的值

    $(window).bind("load resize",function(){ document.documentElement.clientWidth >= 600 ? ...

  5. JS自动缩放页面图片

    /** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int height 高度 * @param strin ...

  6. JQuery 图片延迟加载并等比缩放插件

    原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...

  7. html 网页背景图片根据屏幕大小CSS自动缩放

    https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...

  8. JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...

  9. jquery weui 图片浏览器Photo Browser

    jquery weui 图片浏览器Photo Browser 如何使用? 对应组件地址:http://jqweui.com/extends#swiper 先说说业务场景:类似朋友圈这样的布局效果,点击 ...

随机推荐

  1. iOS获取设备唯一编号,就算删除app从新安装也不变的方法

    第三方开源代码 https://github.com/soffes/SAMKeychain 使用方法 //获取设备信息32 位字符串 -(NSString *)getDeviceString{ NSS ...

  2. HTML标准事件(包含HTML5)

    参考菜鸟教程链接:http://www.runoob.com/tags/ref-eventattributes.html

  3. 【架构师之路】依赖注入原理---IoC框架

    1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑.  图1:软件系统中耦合的对象 如果我们 ...

  4. lua pbc

    先要将proto文件编译成.pb文件,然后再动态绑定实现lua protobuffer,这就需要了解云风做的pbc的项目,地址为:https://github.com/cloudwu/pbc/blob ...

  5. [React Testing] Element types with Shallow Rendering

    When you render a component with the Shallow Renderer, you have access to the underlying object. We ...

  6. Use GraceNote SDK in iOS(一)通过序列化GDO查询专辑封面

    于Use MusicBrainz in iOS之后,因为MusicBrainz找出专辑封面,它只能转移到其他网站提供的音乐信息搜索服务,领导给出GraceNote.(有压力.. .) 需求类似:通过一 ...

  7. 编译lua5.3.2报错提示libreadline.so存在未定义的引用解决方法

    从官网上下载5.3.2的源码后,make linux进行编译,提示报错: gcc -std=gnu99 -o lua lua.o liblua.a -lm -Wl,-E -ldl -lreadline ...

  8. getClass 与getSimpleName

    //首先定义一个借口 package com.test; public interface Fruit { } //定义一个实现类 package com.test; public class App ...

  9. NeralJS需求整理及思路

    NeralJs希望通过解析json数据,动态创建和渲染报表,每个报表呈现一定时间范围的数据,通过使用表格图表等不同的方式,使数据的呈现不死板,且更容易看出规律. 说通俗点,就是动态在一个区域内生成多张 ...

  10. SQL Server 如何创建定时作业

    在做SQL server 管理时,往往需要每日执行定时任务,但是如果每天都去人工执行,非常不方便,而且一般定时操作,都应该是在数据库压力不大时,一般是在夜间.所以我们需要创建定时作业来代替人工的执行定 ...