`
rentianchou
  • 浏览: 69676 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 图片等比例缩放

阅读更多
<SCRIPT LANGUAGE="JavaScript">
<!--
//图片等比例缩放

var FitWidth = 250; //图片宽度
var FitHeight = 176; //图片高度
function ResizePic(ImgTag)
{
var image = new Image();
image.src = ImgTag.src;
if(image.width>0 && image.height>0){
if(image.width/image.height >= FitWidth/FitHeight){
if(image.width > FitWidth){
ImgTag.width = FitWidth;
ImgTag.height = (image.height*FitWidth)/image.width;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
else{
if(image.height > FitHeight){
ImgTag.height = FitHeight;
ImgTag.width = (image.width*FitHeight)/image.height;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
}
}
-->
</script>

为了避免加载时图片暂时没有缩小,可以将图片设置一个默认的大小。
<img width="30" height="30" src="../honor/1.jpg" onload="javascript:ResizePic(this)">
<img width="30" height="30" src="../honor/2.jpg" onload="javascript:ResizePic(this)">
<img width="30" height="30" src="../honor/3.jpg" onload="javascript:ResizePic(this)">
分享到:
评论

相关推荐

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

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

    js实现图片等比例缩放

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

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

    本篇将详细讲解如何使用JavaScript实现图片等比例缩放,以及相关的编程知识。 一、图片等比例缩放原理 等比例缩放的核心思想是保持图像的宽高比不变,避免因缩放导致图像变形。在计算新的宽度或高度时,通常会基于...

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

    本篇将详细介绍如何使用JavaScript实现图片的等比例缩放,并通过一个完整的示例来解析其工作原理。 首先,我们需要理解等比例缩放的基本概念。等比例缩放是指在调整图片大小时,保持其宽高比不变,避免图像变形。在...

    jquery图片等比例缩放

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

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

    总结起来,实现图片等比例缩放的关键在于保持纵横比不变,通过JavaScript动态计算和调整图片的尺寸。这个方法不仅适用于IE6、IE7和Firefox,也适用于其他现代浏览器,为网页设计提供了良好的兼容性和灵活性。在实际...

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

    本文将详细介绍如何利用JavaScript(简称JS)以及jQuery这两种常用前端技术实现图片的等比例缩放。 #### 一、基础知识简介 **1.1 图片等比例缩放的概念** 等比例缩放是指在调整图片大小时保持其原始宽高比不变的...

    图片按比例缩放

    "图片按比例缩放"就是其中一个核心操作,它涉及到图像处理的基本原理和技术。在本篇文章中,我们将深入探讨如何进行图片按比例缩放,以及这一过程中的相关知识点。 首先,我们来理解什么是“按比例缩放”。比例缩放...

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

    本篇文章将从一个具体的JavaScript代码示例出发,详细解析图片等比例缩放的技术实现细节。 #### 二、核心代码分析 首先,我们来看一下这段提供的JavaScript代码片段,它实现了图片等比例缩放的功能。 ```...

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

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

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

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

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

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

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

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

    等比例缩放图片

    在网页设计和开发中,等比例缩放图片是一项常见的任务,尤其在响应式设计中尤为重要。等比例缩放可以确保图片在不同尺寸的设备上显示时保持其原始比例,防止图像失真。本文将深入探讨如何使用jQuery实现这一功能。 ...

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

    1. **网页设计**:为了适应不同分辨率和屏幕尺寸的设备(如手机、平板电脑、台式机等),网页设计师经常需要对页面中的图片进行等比例缩放。 2. **移动应用开发**:在移动应用中,根据用户的设备屏幕尺寸自动调整...

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

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

    js图片等比例缩放

    在探讨“js图片等比例缩放”的主题时,我们深入解析了如何利用JavaScript来实现图片的等比例缩放,这是一个在网络开发中极为实用且常见的需求。等比例缩放的目的是为了适应不同尺寸的屏幕或布局需求,同时保持图片...

    按比例缩放图片,JavaScript代码.rar

    按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码...

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

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

    javascript实现图片按比例缩放

    javascript实现图片按比例缩放

Global site tag (gtag.js) - Google Analytics