//如果图片超过了div设定宽高,就调整图片大小
$(document).ready(function() {
initImageSize("picDiv",240,160);
});
//idName为图片img所在的父节点的ID
//maxWidth最大宽度,maxHeight最大高度
function initImageSize(idName,maxWidth,maxHeight){
$('#'+idName+' img').each(function() {
var maxWidth = maxWidth; // 图片最大宽度
var maxHeight = maxHeight; // 图片最大高度
var ratio = 0; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度
// 检查图片是否超宽
if(width > maxWidth){
ratio = maxWidth / width; // 计算缩放比例
width=maxWidth;
$(this).css("width", maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height); // 设定等比例缩放后的高度
}
// 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
height=maxHeight;
$(this).css("height", maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width", width); // 设定等比例缩放后的高度
}
});
}
分享到:
相关推荐
通过使用javascript的jquery,在图片上滚动鼠标滚轮图片大小改变
jquery适应图片大小不一的展示,挺不错的。分享下
jQuery插件 拖拽和鼠标滚轮控制图片大小
jquery图片浏览自适应大小,可以根据图片自身大小来调整显示框显示
利用jQuery的animate属性,分别给图片三个尺寸 点击的时候将对应的尺寸赋值给图片的宽度、高度即可 使用方法: 1、将style里的css样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的地方...
jQuery实现随窗口大小变化自动适应的背景效果,当用户调整浏览器窗口大小时,背景图片会随着窗口的改变自动调整自适应窗口大小,代码简单实用。
jQuery实现背景图片随着窗口的改变自动调整自适应窗口大小.zip
本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法。分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变。但是前提是要判断图片是否加载完成。主要是通过jQuery的load事件...
当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定...
代码简介:jQuery响应浏览器窗口大小图片排列代码是一款效果类似于Flick和谷歌加的图片画廊效果,为所有图片提供统一的高度,图片按照自身比例进行缩放。
Picture cut 是一个 ... 图像大小调整 拖放图片实现上传 图像尺寸处理 图像裁剪 支持浏览器: Google Chrome Mozilla Firefox Apple Safari Opera Internet Explorer 7 截图: 标签:Picture
7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张...
主要介绍了基于jquery实现图片相关操作,包括图片重绘、图片获取尺寸、图片调整大小、图片缩放,感兴趣的小伙伴们可以参考一下
一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下: ...
Vanillabox是一款很有意思的jquery焦点图插件。它可以随着图片的大小而改变自身的大小。它还支持模态窗口显示焦点图和在焦点图中显示网页和视频。
这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图 片添加...jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。
ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox. ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有...
一款实用简单的图片预加载效果,支持...2、使用一小段jquery代码,指定需要加载的img即可,例如本案例指定class 为 main 下的图片预加载,则如$(".main img"),当然也可以指定加载的loading路径以及加载后的图片大小