`
xixian
  • 浏览: 216435 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery调整图片大小

 
阅读更多
	//如果图片超过了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);    // 设定等比例缩放后的高度
	    }
	});
	}
分享到:
评论

相关推荐

    JQuery控制图片大小代码

    当改变图片尺寸时,为了保持原始宽高比,可以计算新的高度。假设原图宽高比是`ratio = originalWidth / originalHeight`,则新尺寸下的高度可以通过`newHeight = newWidth / ratio`计算得出。这样可以避免图片变形...

    jquery 鼠标滚轮改变图片大小例子

    以上就是使用jQuery实现鼠标滚轮改变图片大小的基本步骤。这个功能可以进一步优化,例如添加平滑过渡效果、考虑图片的原始比例以保持视觉效果等。通过理解并实践这些代码,你可以创建更动态、更具吸引力的网页界面。

    自动调整大小的jquery图片展示特效

    【标题】"自动调整大小的jquery图片展示特效"涉及到的核心技术是使用JavaScript库jQuery来实现网页上图片的动态适应和展示。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计...

    jquery 图片切换 大小图点击切换 轮番切换

    这个效果也可以根据不同的设备尺寸进行优化,例如在移动设备上,可以调整图片的大小和布局,确保在不同屏幕尺寸下都能有良好的显示效果。 综上所述,通过合理的HTML结构、CSS样式和jQuery事件处理,我们可以实现一...

    jquery图片浏览自适应大小

    然后,通过jQuery监听窗口大小变化(`$(window).resize()`),每当窗口尺寸改变时,重新计算图片容器的大小,以确保图片始终充满容器但不超出。 在实际应用中,可能还需要考虑浏览器兼容性和性能优化。例如,可以使用...

    Jquery图片自适应大小并居中

    使用Jquery来调整图片的大小和位置。核心函数如下: ```javascript function formatSize(id, maxW, maxH) { var width = $('#' + id).width(); var height = $('#' + id).height(); var maxWidth = maxW; var...

    jquery自适应图片大小幻灯片

    在创建“jquery自适应图片大小幻灯片”时,我们需要掌握几个关键知识点,这些知识点将帮助我们构建一个既美观又功能强大的图片轮播组件。 首先,了解jQuery基础是必要的。jQuery库通过链式调用、选择器和方法提供了...

    jQuery自适应图片大小.zip

    例如,我们可以监听窗口的`resize`事件,当窗口大小发生变化时,动态调整图片的大小: ```javascript $(window).on('resize', function() { $('img').each(function() { var $img = $(this); $img.width($img....

    jQuery插件 拖拽和鼠标滚轮控制图片大小

    我们需要监听mousedown、mousemove和mouseup事件,通过计算鼠标位置与图片初始位置的差值,来改变图片的位置,实现拖拽效果。 接下来,是鼠标滚轮控制图片大小的部分。这个功能依赖于浏览器的wheel事件,配合使用...

    jquery生成海报图片,可自定义图片大小

    在生成海报图片的场景下,jQuery可以帮助我们动态地调整图片元素的大小,以适应用户自定义的需求。 生成海报图片的过程中,我们可能需要使用到HTML5的Canvas元素。Canvas是一个基于矢量图形的画布,可以通过...

    jQuery自适应窗口大小轮播图特效

    轮播图的核心原理是通过改变图片或内容的可见性,模拟出平滑过渡的效果。 三、自适应设计 自适应网页设计(Responsive Web Design,RWD)是指网页可以根据用户使用的设备和屏幕尺寸自动调整布局和内容。对于轮播图...

    jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果

    "jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果"这个主题聚焦于利用jQuery库来实现文本大小根据浏览器窗口尺寸变化而自动调整的功能。jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM...

    jQuery自适应窗口大小轮播图特效.zip

    总结起来,jQuery自适应窗口大小轮播图特效的核心在于使用jQuery监听窗口的resize事件并动态调整轮播图的尺寸,以及通过定时器和动画函数实现图片的自动切换。通过理解并应用这些技术,你可以创建出一款既美观又实用...

    jQuery自适应窗口大小图片轮播特效

    **jQuery自适应窗口大小图片轮播特效**是一种利用JavaScript库jQuery实现的网页图像展示功能,它具有自动调整尺寸的能力,能够根据用户浏览器窗口的大小变化,动态地改变图片轮播的宽度和高度,以保持良好的视觉效果...

    jquery幻灯片插件图片层叠加按钮控制图片大小缩放切换

    当用户点击叠加在图片上的按钮时,插件会捕获这个点击事件,然后执行相应的代码,例如改变图片的大小或者切换到下一张图片。 幻灯片的切换效果通常涉及到CSS3的过渡(transition)和动画(animation)属性。这些...

    jQuery自适应窗口大小图片轮播特效.zip

    这个“jQuery自适应窗口大小图片轮播特效”就是一种实现方式,它能够自动调整大小以适应不同分辨率的窗口,确保在任何设备上都能呈现出良好的视觉体验。 首先,`index.html`是项目的核心文件,它包含了HTML结构,...

    jQuery.flexslider图片插件自适应屏幕大小带缩略图

    它允许图片和内容根据屏幕大小自动调整,提供优秀的用户体验,尤其是在移动设备上。 1. **jQuery基础**:Flexslider 基于 JavaScript 库 jQuery 构建,jQuery 是一个轻量级的库,简化了DOM操作、事件处理和动画效果...

    jquery实现父元素大小改变插件:jquery-resize

    《jQuery实现父元素大小改变插件:jQuery-resize深度解析》 在Web开发中,响应式设计已经成为一种标准,使得网站能够适应不同设备的屏幕尺寸。为了实现这一目标,开发者们常常需要监听元素的尺寸变化,以便在尺寸...

    jQuery自适应窗口大小图片排列代码.zip

    `jquery.row-grid.js`是专为图片排列设计的jQuery插件,它能根据浏览器窗口的大小动态调整图片的布局。核心功能包括: 1. **栅格系统**:将图片以网格的形式排列,每行可容纳一定数量的图片。 2. **自适应布局**:当...

Global site tag (gtag.js) - Google Analytics