`

图像等比例缩放

 
阅读更多
Js代码 
  1. $(window).bind("load"function() {  
  2.       
  3. // IMAGE RESIZE  
  4.     $('#product_cat_list img').each(function() {  
  5.         var maxWidth = 120;  
  6.         var maxHeight = 120;  
  7.         var ratio = 0;  
  8.         var width = $(this).width();  
  9.         var height = $(this).height();  
  10.         if(width > maxWidth){  
  11.             ratio = maxWidth / width;  
  12.             $(this).css("width", maxWidth);  
  13.             $(this).css("height", height * ratio);  
  14.             height = height * ratio;  
  15.         }  
  16.         var width = $(this).width();  
  17.         var height = $(this).height();  
  18.         if(height > maxHeight){  
  19.             ratio = maxHeight / height;  
  20.             $(this).css("height", maxHeight);  
  21.             $(this).css("width", width * ratio);  
  22.             width = width * ratio;  
  23.         }  
  24.     });  
  25.       
  26. //$("#contentpage img").show();  
  27.       
  28. // IMAGE RESIZE  
  29. });  
  30. 转自:http://www.iteye.com/news/28047
分享到:
评论

相关推荐

    图像等比例缩放 等比例缩放图片

    ### 图像等比例缩放知识点详解 #### 一、概念介绍 在数字图像处理领域,图像等比例缩放是一项常用的技术手段,它主要用于调整图像的尺寸大小,同时保持图像原有的宽高比不变,以避免图像在缩放过程中发生变形。等...

    图片等比例缩放个人最优化版(IE6,IE7,FF)

    《图片等比例缩放技术详解及优化实践》 在网页设计中,图片的展示效果往往直接影响用户体验。尤其是当图片尺寸不一,或者需要在不同设备上展示时,等比例缩放成为一种必不可少的技术手段。本文将深入探讨如何实现...

    js实现图片等比例缩放

    在网页设计中,图片的等比例缩放是一个常见的需求,特别是在响应式布局中,为了保持图像的原始比例,避免拉伸或压缩导致变形,我们通常会利用JavaScript来动态调整图片大小。本文将深入探讨如何使用JavaScript实现...

    图片等比例缩放问题

    在处理图像时,经常需要对图片进行等比例缩放,以适应不同的显示需求或优化存储空间。本篇文章将详细介绍如何实现图片的等比例缩放,包括缩放的基本原理、实现方法以及注意事项。 #### 一、基本原理 等比例缩放的...

    图片等比例缩放代码,图片等比例缩放JS代码,图片缩放代码

    总结,图片等比例缩放是网页开发中常见的需求,通过JavaScript可以方便地实现这一功能,同时需要注意保持图像的视觉效果和性能优化。以上就是关于图片等比例缩放JS代码的详细解释,希望对您有所帮助。

    CSS3的background-size属性,实现响应式式图片等比例缩放。

    CSS3的`background-size`属性就是实现响应式图片等比例缩放的关键技术之一,它解决了传统方法中图片在不同屏幕尺寸下显示不适应的问题。 `background-size`属性允许我们自定义背景图片的大小,而不仅仅是局限于图片...

    图片等比例缩放,网页图片处理方法

    ### 图片等比例缩放——网页图片处理方法 在网页设计与开发中,为了确保页面布局的美观性和响应性,经常需要对图片进行等比例缩放处理。这不仅可以提高用户体验,还能有效减少页面加载时间。本文将详细介绍如何利用...

    jquery图片等比例缩放

    有时候我们需要图片在不同的屏幕尺寸下保持等比例缩放,以确保图片的视觉效果不被破坏。jQuery,一个广泛使用的JavaScript库,提供了方便的API来实现这样的功能。本文将深入探讨如何利用jQuery实现图片的等比例缩放...

    图片等比例缩放,动态加载

    图片等比例缩放和动态加载是两种常见的优化技术,它们可以提高页面加载速度,节省用户流量,同时保持图片的视觉一致性。以下将详细介绍这两种技术及其实现方法。 一、图片等比例缩放 等比例缩放是指在不改变图片宽...

    jquery图片插件设置图片等比例缩放

    "jQuery图片插件设置图片等比例缩放"是一个实用的功能,能够确保图片在不同尺寸的屏幕上保持其原始比例,从而避免图片变形,提供良好的视觉效果。jQuery作为一款强大的JavaScript库,提供了丰富的功能来处理DOM操作...

    JS图片等比例缩放方法完整示例

    等比例缩放是指在调整图片大小时,保持其宽高比不变,避免图像变形。在JavaScript中,我们可以通过计算宽度和高度的比例,然后根据设定的最大宽度和最大高度进行调整。 以下是一个名为`AutoResizeImage`的...

    php图片等比例缩放

    从开源代码中总结的php图片等比例缩放 测试可用

    图片等比例缩放.txt 图片等比例缩放.txt

    ### 图片等比例缩放知识点解析 #### 一、知识点概述 在网页设计与开发过程中,经常需要处理图片的大小调整问题。为了保持图片的视觉效果不失真,等比例缩放成为了常用的一种处理方式。本篇文章将从一个具体的...

    JavaScript实现网页图片等比例缩放 图片等比例缩放

    ### JavaScript 实现网页图片等比例缩放 在网页设计与开发过程中,经常遇到的一个问题是确保图片能在不同设备、不同分辨率的屏幕上保持良好的显示效果。图片的等比例缩放是其中一种解决方案,它能够保证图片在缩放...

    jQuery图片等比例缩放截取显示代码.zip

    "jQuery图片等比例缩放截取显示代码" 是一种解决图片在不同尺寸屏幕下不失真的技术,它利用jQuery库和一个名为jQThumb的插件实现。这里我们将深入探讨这个技术的工作原理、实现方式以及其优势。 首先,jQuery是一个...

    js图片缩放效果制作鼠标滚动图片等比例缩放

    在网页设计中,动态的图片展示效果可以提升用户体验,其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能,来实现图片随着页面滚动而优雅地...

    jquery图片插件设置图片等比例缩放.rar

    jquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置...

    jquery图片等比例缩放图片左右垂直居中

    在前端开发领域,图片的等比例缩放与居中显示是一项常见的需求,尤其在构建响应式网站或处理不同尺寸图片的展示时。"jQuery图片等比例缩放图片左右垂直居中"这一技术就是为了应对这样的挑战。jQuery是一个广泛使用的...

    js 图片等比例缩放

    js实现的图片等比例缩放,js实现的图片等比例缩放

    js图片等比例缩放

    等比例缩放的目的是为了适应不同尺寸的屏幕或布局需求,同时保持图片原有的长宽比,避免因缩放而造成的图像失真。 ### 核心知识点:JavaScript中的图片等比例缩放 #### 1. **函数设计原理** 在提供的代码片段中...

Global site tag (gtag.js) - Google Analytics