jquery 自动调整图片大小
<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 自动调整图片大小的更多相关文章
- JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片
首先我们来看效果图: 点击上传之后如下: 在这里我获取到文件的大小,并且如果超出我设定的大小,则禁止上传! 不多说,上代码:先看div布局: <div class="imageCont ...
- CSS自动控制图片大小的代码
img { max-width: 800px; height: auto; } 代码中的max-width:800px限制图片的最大宽度为800像素,而下面的hight:auto很关键,可以保证图片有 ...
- [jquery] 图片热区随图片大小自由缩放
在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- jquery裁剪图片插件cropit示例
重装农药第16天!! jquery裁剪图片插件cropit示例 背景:做的手机网页项目,用html file控件上传图片,有些手机拍照后图片会很大,20M以上的,用之前的H5 formdata上传的话 ...
- 在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片
在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...
- 【jquery】图片前后对比效果——beforeAfter
今天分享一款 jquery 插件——图片前后对比(beforeAfter),效果如下: 使用方法: <!DOCTYPE HTML> <html lang="en" ...
随机推荐
- ShareSDK QQ分享失败的坑
QQ分享的话,有标题和内容字符数限制,QQ好友的话限制的很小,标题30字符,内容40字符.分享之前限制一下.
- 求职(2015南京站获得百度、美的集团、趋势科技、华为offer)
版权所有所有:没有马缰绳chhuach(CSDN博客源).转载请注明出处. 禁止www.haogongju.net转载. 特此声明 一.开篇: 9月底,找工作接近尾声,笔者主要经历了2015年南京站百 ...
- Hortonworks HDP Sandbox定制(配置)开机启动服务(组件)
定制Hortonworks HDP开机启动服务能够这样做:本文原文出处: http://blog.csdn.net/bluishglc/article/details/42109253 严禁不论什么形 ...
- 搭建MyBatis框架
一.开发环境 1.JDK 1.6.0_22 2.MyEclipse 10.7.1 3.Oracle_10g_10.2.0.4 注:各软件版本不是必须的,正常任意版本都行,文件较大就不附上下载地址了,推 ...
- Emmet 插件使用教程
1)使用 Emmet 生成 HTML 的语法详解生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 ...
- q.js实现nodejs顺序调用
nodejs的异步调用有时候是最让人头疼的,如何能是一些代码顺序的执行呢,这里和大家分享nodejs的promise 什么是promise promise一个标准,它描述了异步调用的返回结果,包括正确 ...
- Asp.net MVC + EF6.0 经常出现的问题
1.运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...
- Oracle触发器Trigger基础1
/* Trigger是作用在表上,或是数据库上,或是用户上.当用户在表上(其他)做某些操作时,trigger将会自己执行. 可以在表上:insert,update,delete Trigger只对表的 ...
- CSS3实现漂亮ToolTips
演示Demo 5种效果的主要css如下: /* transform:向元素应用2D或3D转换; transform-origin属性只有在定义了transform以后才生效 */ .tooltip-e ...
- 表达式求值(河南省第四届ACM试题-C题)题解
以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定指定的一个由3种函数组成的表达式,计算其数值. [题目分析] 一开始以为是后缀表达式,后来抽了没想出来,最后用了递归的方法解 ...