`

Jquery控制图片宽度及高度 ,做到等比例缩放

 
阅读更多

 

$(document).ready(function() {
		    var maxWidth = 780;
		    var maxHeight = 500;
		    var zoomTimes;
		    $("img").each(function(){			
				    var curWidth  = $(this).width();
				    var curHeight = $(this).height();
				    if(curWidth > maxWidth){
				         $(this).width(maxWidth);
				         zoomTimes=curWidth/maxWidth;
				         $(this).height(curHeight/zoomTimes);
				    }else if(curHeight > maxHeight){
				         $(this).height(maxHeight);
				         zoomTimes=curHeight/maxHeight;
				         $(this).width(curWidth/zoomTimes);
				    }
			    });
		});
 

 

分享到:
评论

相关推荐

    jQuery实现图片等比例缩放截取显示特效源码.zip

    等比例缩放意味着宽度和高度按照相同的比例进行缩放,这样原始图像的形状就能得到保留。在jQuery中,我们可以使用CSS的`width`和`height`属性以及`scale()`方法来实现这一效果。 接下来,是图片截取显示的部分。这...

    jQuery自适应图片宽度幻灯片

    jQuery自适应图片宽度幻灯片是一种常见的网页动态展示技术,常用于网站的首页或产品展示区域,以吸引用户的注意力并提供交互式体验。这个技术利用了JavaScript库jQuery的强大功能,结合CSS样式和HTML结构,实现了...

    jquery控制图片同比例放大缩小

    **jQuery控制图片同比例放大缩小**是Web开发中一种常见的交互效果,主要应用于网页上的图片展示,提升用户体验。本文将详细介绍如何使用jQuery实现这一功能,以及相关知识点。 首先,我们需要理解的是图片的缩放...

    jquery自动图片最大宽度

    // 监听窗口大小变化事件,以便在窗口缩放时重新调整图片宽度 $(window).resize(function() { adjustImageWidth(); }); }); function adjustImageWidth() { var containerWidth = $('.image-container').width...

    jQuery图片缩放例子代码

    总的来说,jQuery图片缩放涉及了jQuery的选择器、事件处理、动画和CSS属性操作等多个方面。掌握这些知识点,可以让你在创建交互式网站时更加得心应手。在实际应用中,结合具体需求进行优化和调整,以达到最佳的用户...

    JQuery实现等比缩放图片插件

    - 应用缩放:利用`css()`方法,将计算出的缩放比例应用到图片的宽度和高度上,同时设置`max-width: 100%`和`height: auto`,以确保等比缩放。 5. **响应式支持**:为了在窗口大小变化时依然保持图片的等比缩放,...

    jQuery等比例缩放大图片_大图片自适应页面布局

    这段代码将使图片宽度不超过其父元素的宽度,而高度会自动调整以保持比例。这种方法无需JavaScript,但有时可能需要更精确的控制,这时可以引入jQuery。 方法二:jQuery动态计算并调整尺寸 当CSS不能满足需求时,...

    jQuery自适应图片宽度幻灯片.zip

    【jQuery自适应图片宽度幻灯片】是一种基于JavaScript库jQuery实现的动态图片展示效果,它能够根据图片的宽度和浏览器窗口大小自动调整幻灯片的布局,为用户提供一种流畅且美观的图片浏览体验。这种幻灯片插件常用于...

    jQuery滚动条缩放图片

    例如,`$(element).css('transform', 'scale(x, y)')`可以将元素的宽度和高度分别缩放为原来的比例x和y。在我们的场景中,x和y的值会根据滚动距离动态计算。 为了平滑过渡,我们还可以使用`$(element).animate()`...

    jQuery 图片的缩放

    对于图片缩放,jQuery 提供了 `.animate()` 方法,它可以平滑地改变元素的 CSS 属性,包括宽度(width)、高度(height)以及透明度(opacity)等。例如,如果要将一个图片元素的宽度和高度都放大到原来的两倍,可以...

    Jquery图片缩放

    然后,我们可以编写jQuery脚本来控制图片的缩放。jQuery的选择器语法非常直观,可以轻松地选取HTML元素。例如,如果我们想要操作所有`<img>`标签,可以使用`$("img")`选择器。接下来,我们可以添加事件监听器,如`$...

    js控制图片放大、缩小、按比例显示

    在JavaScript(JS)编程中,控制图片的放大、缩小以及按照比例显示是常见的需求,尤其在网页设计和交互效果中。下面将详细讲解如何利用JavaScript实现这些功能。 1. **图片放大与缩小** - **鼠标滚动事件**:在...

    jquery实现图片等比例缩放以及max-width在ie中不兼容解决

    本篇文章将详细介绍如何使用jQuery来实现图片等比例缩放,并解决`max-width`在IE6中的兼容性问题。 首先,我们需要理解`max-width`这个CSS属性的作用。`max-width`用于限制元素的最大宽度,当元素的宽度超过设置值...

    jQuery+CSS 用图片收缩与放大 插件

    在这个插件中,jQuery负责处理用户的交互,例如点击事件,以及控制图片的缩放动画。 接下来是CSS,层叠样式表(CSS)用于定义网页元素的外观、布局和结构。在这个插件中,CSS用于设置图片的初始样式,如大小、位置...

    jQuery实现的上传图片等比例压缩功能源码.zip

    在这个过程中,我们可以设置Canvas的宽度和高度,使其按比例缩放图片。之后,使用`toDataURL()`方法将Canvas的内容转换为data URL,这个URL可以作为新的压缩图片的源。 以下是一个基本的步骤概述: 1. 创建一个`...

    jQuery点击图片滑动缩放切换特效源码.zip

    4. **动画效果**:jQuery的`.animate()`方法用于创建自定义动画,它可以改变各种CSS属性,如宽度、高度、透明度等,从而实现图片的滑动和缩放效果。配合使用`.stop()`方法可以防止动画堆栈,确保动画流畅执行。 5. ...

    jquery插件:图片上传按比例预览

    这个插件允许用户在上传图片之前预览其按照指定比例缩放后的效果,提升了用户体验,特别是对于那些需要严格控制上传图片尺寸的应用来说非常有用。 首先,我们来理解一下“图片上传按比例预览”的核心功能。当用户...

    jquery 伸缩图片

    当鼠标进入图片范围时,图片宽度会逐渐扩展到400px;鼠标离开时,宽度则会回退到200px。 ### 五、优化与扩展 1. **响应式设计**:如果希望在不同设备上都有良好的展示效果,可以使用媒体查询(media queries)来...

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

    这段代码会将id为"myImage"的图片元素的宽度设为500像素,高度设为700像素。 在生成海报图片时,可能还需要考虑到图片的纵横比。如果希望保持原图比例缩放,可以使用CSS的max-width和max-height属性,或者在...

    基于jQuery实现图片缩放平移预览特效源码.zip

    缩放通常是通过对图片的宽度和高度进行动态调整来实现的,同时保持图片的比例,以防止变形。 4. **图片平移**:平移允许用户在预览模式下移动图片,查看图片的不同部分。这通常与缩放结合使用,让用户可以在大图片...

Global site tag (gtag.js) - Google Analytics