(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. selenium page object model

    Page Object Model (POM) & Page Factory in Selenium: Ultimate Guide 来源:http://www.guru99.com/page ...

  2. Bestcoder #47 B Senior&#39;s Gun

    Senior's Gun Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tot ...

  3. android手机内存大小获取

    //获取手机中文件管理器中存储大小 File datadir = Environment.getExternalStorageDirectory(); //获取手机内部的存储大小 File datad ...

  4. 开发专题指南: JEECG高速微云开发平台前言

    JEECG微云高速开发平台-前言 1. 前言 1.1. 技术背景 随着WEB UI 框架(EasyUI/Jquery UI/Ext/DWZ)等的逐渐成熟,系统界面逐渐实现统一化,代码生成器也能够生成统 ...

  5. Effective JavaScript Item 30 理解prototype, getPrototypeOf和__proto__的不同

    本系列作为Effective JavaScript的读书笔记. prototype,getPropertyOf和__proto__是三个用来訪问prototype的方法.它们的命名方式非常类似因此非常 ...

  6. OD: Exploit Me - Overwrite Return Address

    修改邻接变量的方法对代码环境限制比较多,更通用.更强大的方法是修改 EBP.返回地址等状态值. 为了方便调试,修改之前的代码如下: #include<stdio.h> #include&l ...

  7. inline-block容器的高度撑开位置

    block的高度是从最上面撑开的 那么inline-block呢? 直接上代码 <!doctype html> <html> <head> <meta cha ...

  8. H3 BPM 笔记

    先通过流程设计器设计流程 注意  审批:1个人 会签: 多人用 同意时: 若为有一个同意就通过 则 审批选项卡 的同意出口 设为1 如果需要所有人同意才通过 则  审批选项卡 的同意出口 设为100% ...

  9. discuz3.2x增加邮箱验证功能

    为防止垃圾用户多次注册,为disczu增加邮箱验证功能. 大致分为二步: 1.申请邮箱,这里推荐使用腾讯免费企业邮箱:https://exmail.qq.com/portal/introducefre ...

  10. brew 更换国内源(镜像)

    cd /usr/local git remote set-url origin git://mirrors.tuna.tsinghua.edu.cn/homebrew.git brew update ...