<script type="text/javascript">
$(document).ready(function(){
$('#cons img').each(function() {
var maxWidth =650; // 图片最大宽度
var maxHeight =650; // 图片最大高度
var ratio = 0; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽
if(width > maxWidth){
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width", maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height); // 设定等比例缩放后的高度
} // 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
$(this).css("height", maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width", width); // 设定等比例缩放后的高度
}});
});
</script>

  

jquery 自动调整图片大小的更多相关文章

  1. JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片

    首先我们来看效果图: 点击上传之后如下: 在这里我获取到文件的大小,并且如果超出我设定的大小,则禁止上传! 不多说,上代码:先看div布局: <div class="imageCont ...

  2. CSS自动控制图片大小的代码

    img { max-width: 800px; height: auto; } 代码中的max-width:800px限制图片的最大宽度为800像素,而下面的hight:auto很关键,可以保证图片有 ...

  3. [jquery] 图片热区随图片大小自由缩放

    在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...

  4. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

  5. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  6. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  7. jquery裁剪图片插件cropit示例

    重装农药第16天!! jquery裁剪图片插件cropit示例 背景:做的手机网页项目,用html file控件上传图片,有些手机拍照后图片会很大,20M以上的,用之前的H5 formdata上传的话 ...

  8. 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

  9. 【jquery】图片前后对比效果——beforeAfter

    今天分享一款 jquery 插件——图片前后对比(beforeAfter),效果如下: 使用方法: <!DOCTYPE HTML> <html lang="en" ...

随机推荐

  1. 有一种设计风格叫RESTful

    一 前言 刚看了<RESTful Web APIs中文版>.试读了前两章. 每本书的第一章都是抽象得不得了,是整本书的总结:开篇说基础有点简单,从教你怎么向地址栏输入地址訪问网页開始(某人 ...

  2. HDU2054_A == B ?【模拟题】【大数】【水的问题】

    A == B ? Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  3. 安装Linux系统到u盘

    第一步:首先插入u盘到电脑主机usb接口处(建议插入到主机箱后置的usb接口).然后打开UltraISO软件,再打开选择须要写入u盘的Ubuntu 10.04或者其它版本号的Linux系统的iso镜像 ...

  4. 【floyed】【HDU1217】【Arbitrage】

    题目大意: 给你几种货币,以及几种汇率关系,问是否存在套利的可能? 思路: 初步想法:图上存在一个环的路径上权值相乘大于1.... 再者:该如何找到图上所有环呢.... 好吧 经过鸟神 和 况神的指点 ...

  5. jQuery关于mouseover和mouseenter的区别

    原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...

  6. windows不能在本地计算机启动SQL Server(MSSQLSERVER)

    windows不能在本地计算机启动sql server 在登录数据库的时候,发现数据库不能登录,提示[无法连接到实例],很明显这是因为数据库服务没有启动导致的,我们打开[服务]启动相应的SQL数据库服 ...

  7. c# 读取IntPtr 中的数据

    c++的写法是这样的:LRESULT CPictureQueryDlg::OnQueryPicNty(WPARAM wp, LPARAM lp){EnableWindow(TRUE); BYTE *p ...

  8. centos yum 完全卸载依赖

    centos yum 完全卸载依赖    you install a package with yum install, say pdftk, it will pull in a lot of dep ...

  9. oracle group by 使用

    SELECT supplier_id, max(evidence_date) AS evidence_date,max(TD_SUPPLIER_EVIDENCE_INFO_ID) AS TD_SUPP ...

  10. android Mvp简单实用

    View 对应于Activity,负责View的绘制以及与用户交互Model 依然是业务逻辑和实体模型Presenter 负责完成View于Model间的交互 模拟客户端的登录操作,并实现登录成功与登 ...