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

JS控制图片显示的大小

阅读更多

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
 var image=new Image();
 image.src=ImgD.src;
 if(image.width>0 && image.height>0){
  flag=true;
  if(image.width/image.height>= 164/112){
   if(image.width>164){
    ImgD.width=164;
    ImgD.height=(image.height*164)/image.width;
   }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
   }
   ImgD.alt=image.width+"x"+image.height;
  }
  else{
   if(image.height>112){
    ImgD.height=112;
    ImgD.width=(image.width*112)/image.height;
   }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
   }
   ImgD.alt=image.width+"x"+image.height;
  }
 }
}
//-->
</script>
</HEAD>

<BODY>

 

<a href="./img.jpg" target="_blank"><img src="C:\Users\Public\Pictures\Sample Pictures\Baffin Island, Canada.jpg" border="0" width="164" height="112" onload="javascript:DrawImage(this);"></a>

<a href="./img.jpg" target="_blank"><img src="C:\Users\Public\Pictures\Sample Pictures\Dock2.jpg" border="0" width="164" height="112" onload="javascript:DrawImage(this);"></a>
</BODY>
</HTML>

分享到:
评论

相关推荐

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    在给定的文件内容中,描述了一个名为AutoResizeImage的JavaScript函数,该函数能够根据设定的最大宽度(maxWidth)和最大高度(maxHeight)来调整图片大小,同时保持图片原始的宽高比。具体实现步骤如下: 1. 函数定义...

    控制图片显示大小的代码

    总结来说,控制图片显示大小主要通过HTML的`width`和`height`属性,以及CSS的`max-width`和`max-height`。在JavaScript中,可以通过修改元素的`style`属性来动态调整图片尺寸,可以是固定的像素值,也可以基于窗口...

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

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

    JS控制图片上传大小

    本文将深入探讨如何使用JavaScript(JS)来控制图片上传的大小,确保用户上传的图片符合预设的标准。 一、图片上传前的前端验证 在用户提交图片之前,前端验证是最直接的控制方式。可以使用HTML5的`FileReader API...

    js验证上传图片 大小 格式

    在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...

    图片显示特效javascript

    综上所述,JavaScript在图片显示特效方面具有广泛的应用,从简单的图片加载控制到复杂的动画效果,都能实现。开发者可以根据项目需求选择合适的库和方法,以创造丰富的视觉体验。在实际开发中,还需要考虑性能优化,...

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

    本主题聚焦于一个特定的jQuery插件——使用按钮控制图片大小缩放和切换功能。这个插件允许用户通过叠加在图片上的控制按钮来调整图片的大小,并进行平滑的幻灯片切换。 首先,让我们了解一下jQuery的基础。jQuery是...

    js控制图片缩放 不失真 获取图片真实长和宽

    在JavaScript中,实现图片的等比例缩放以保持不失真是一项常见的需求,特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能,并解决图片在切换时保持正确比例的问题。 首先,我们要明白图片不失真的...

    js用拖动滑块来控制图片大小的方法

    ### JavaScript 控制图片大小的拖动滑块技术 #### 1. 概述 在Web页面中,实现图片大小的动态调整是一个常见需求。传统上,用户可能需要点击按钮或在选项中选择,然后页面重新加载或显示新大小的图片。然而,使用...

    js焦点图切换按钮控制大小图片滚动

    在本教程中,我们将深入探讨如何使用JavaScript来实现焦点图的切换,并特别关注如何通过按钮控制大小图片的滚动。 首先,我们需要创建HTML结构,包括主图片区域、按钮和图片列表。主图片区域通常包含一个大的图片...

    用css来控制图片大小显示的实现方法与代码

    用CSS控制图片大小显示的实现方法与代码 在网页设计中,图片大小的控制是非常重要的一方面。因为图片的大小不仅影响网页的布局,也影响用户的浏览体验。如果图片太大,可能会破坏网页的整体布局,影响用户的浏览...

    wangEditor.js

    直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小,直接替换wangEditor.js文件,即可编辑上传图片大小

    js控制图片等比输出

    在网页上,图片的尺寸通常由CSS来控制,但当需要动态响应用户操作或设备分辨率变化时,JavaScript可以发挥重要作用。 JavaScript提供了DOM(Document Object Model)接口,让我们能够动态地操作网页元素,包括修改...

    左右控制图片滚动

    "左右控制图片滚动"是一个JavaScript实现的特效,主要用于展示一组图片,并通过左右按钮或者手势来控制图片的前后切换,这种功能在产品展示、轮播广告等场景中十分常见。 在JavaScript中,实现这样的功能通常会涉及...

    JAVASCRIPT控制一行显示的滚动图片

    总的来说,JavaScript控制一行显示的滚动图片涉及到HTML布局、JavaScript事件处理和CSS样式调整。理解这些基础知识是实现动态网页效果的关键。通过不断地学习和实践,你可以创建出更复杂、更吸引人的网页动态效果。

    js实现点击图片放大照片

    本文将深入探讨如何使用JavaScript实现点击图片后放大显示的功能,以及如何创建图片的缩略图。 首先,我们需要理解JavaScript的基本概念。JavaScript是一种解释型的、基于原型的、动态类型的客户端脚本语言,主要...

    JS 按钮控制图片左右无缝滚动

    ### JS按钮控制图片左右无缝滚动实现方法 #### 一、技术背景与应用场景 在现代Web开发中,利用JavaScript实现各种动态效果是常见的需求之一。其中,“JS按钮控制图片左右无缝滚动”这一功能常用于网站轮播图、产品...

    js图片显示

    在JavaScript(JS)中,图片显示是网页动态交互的一个常见需求。这主要涉及到HTML的`&lt;img&gt;`元素、JavaScript操作DOM以及对AJAX的理解。在这个主题下,我们将深入探讨如何利用JavaScript来加载、控制和处理网页中的...

    js控制图片滚动

    在探讨“js控制图片滚动”的知识点时,我们深入解析如何运用JavaScript来实现图片的自动滚动效果,这是一种在网页设计中非常实用的技术,尤其当需要展示大量图片或在有限空间内循环展示图片时。下面,我们将从理解...

Global site tag (gtag.js) - Google Analytics