(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. java并发编程--Runnable Callable及Future

    1.Runnable Runnable是个接口,使用很简单: 1. 实现该接口并重写run方法 2. 利用该类的对象创建线程 3. 线程启动时就会自动调用该对象的run方法 通常在开发中结合Execu ...

  2. struts2.1.*中再实现了一个servlet的方法

    学习Struts2也有一段时间了,今天用Servlet写了一个验证码,然后搬到Struts2中,惊奇地发现Servlet无法访问,出现404错误!后来折腾了半天,终于找出原因了.这也算我学习中的一个重 ...

  3. 我的创业劲儿,无可阻挡-JAVA学院张孝伟

    导语:张孝伟,这个怀揣着创业梦想的农村小伙,为了报答父母的恩情,他开启了自己的逐梦之旅.友好的伙伴,火旺的生意.以前让他如鱼得水.就在他满足于现状的时候,一场突如其来的事故,让他一夜间倾家荡产.他是否 ...

  4. freemarker字符串转换成日期和时间

    freemarker字符串转换成日期和时间 1.日期时间转换总结 (1)date用来转换为日期 (2)time用来转换为时间 (3)datetime用来转换为日期和时间 2.展示演示样例 <#- ...

  5. [Git] Automatically running tests before commits with ghooks

    Wouldn't it be nice if everyone ran the tests before committing code? With ghooks, you can automatic ...

  6. emacs快捷键学习(一)--Linux最强大的编辑器

    emacs是一个非常强大的编辑器.经常使用的快捷键总结例如以下: 退出emacs:ctrl+x ctrl+c 移动到下一屏:ctrl+v 移动到上一屏:alt+v 将光标所在行移动到屏幕中间:ctrl ...

  7. 前端 HTML基础

    前端三大利器概述 学习前端,不得不学习前端中的三大利器:html + css + javascript.那么这三个组件分别起到什么作用呢?以人体为例,单单具有html属性的人,只是一个裸体的人偶(理解 ...

  8. Web应用程序项目XXXX已配置为使用IIS。无法访问IIS元数据库。您没有足够的特权访问计算机上的IIS网站

    问题:Windows8下直接使用VS打开项目,出现问题:XXXX已配置为使用IIS.无法访问IIS元数据库.您没有足够的特权访问计算机上的IIS网站.解决:1.以“管理员权限”运行VS,在VS菜单打开 ...

  9. 用ueditor上传图片、文件等到七牛云存储

    ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll, ...

  10. Sql省市三级联动一张表

    CREATE TABLE [dbo].[region]( [region_id] [int] NULL, [region_name] [varchar](50) COLLATE Chinese_PRC ...