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

用JS控制显示出来的图片大小

阅读更多

<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>= 90/110){
if(image.width>90){
ImgD.width=90;
ImgD.height=(image.height*90)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>110){
ImgD.height=110;
ImgD.width=(image.width*110)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>

 

在img标签中用onload="DrawImage(this)"来调用

分享到:
评论

相关推荐

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

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

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

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

    控制图片显示大小的代码

    本篇文章将详细讲解如何利用JavaScript来控制图片的显示大小,帮助你更好地理解和应用这一技术。 首先,我们了解HTML中图片元素的基本结构。一个基本的图片标签`&lt;img&gt;`如下所示: ```html 图片描述"&gt; ``` `src`...

    js验证上传图片 大小 格式

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

    JS控制图片上传大小

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

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

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

    图片显示特效javascript

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

    js实现点击图片放大照片

    JavaScript是一种解释型的、基于原型的、动态类型的客户端脚本语言,主要用于Web页面的开发,它可以控制网页的行为,如响应用户的点击事件。在这个场景中,我们关注的是“事件监听”和“DOM操作”。 当用户点击图片...

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

    假设我们有一个图片列表和一个显示图片的容器: ```html ;"&gt; &lt;li&gt;&lt;img src="image1.jpg"&gt; &lt;li&gt;&lt;img src="image2.jpg"&gt; &lt;!-- 更多图片... --&gt; ``` 我们可以使用以下JavaScript代码来实现图片的切换: ```...

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

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

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

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

    javascript制作相册 浏览图像 图片的放大,缩小,适应窗口大小,按实际大小显示,下一张上一张翻页.zip

    在JavaScript编程领域,创建一个功能丰富的相册是常见的需求,特别是在网页设计中。...通过实践和理解其中的代码,可以加深对JavaScript操作DOM和处理事件的理解,同时也能掌握动态创建和控制图片效果的技巧。

    Lightbox插件(图片大小调节)

    在用户打开大图时,Lightbox会根据图片的原始尺寸和浏览器窗口的大小自动调整图片显示比例,确保图片能够完整、清晰地呈现,而不会超出屏幕范围。同时,为了适应不同设备和屏幕分辨率,Lightbox通常也支持响应式设计...

    图片弹窗显示大图JS代码

    在这个场景中,"图片弹窗显示大图JS代码"就是我们要讨论的核心知识点。 首先,`index.html`是网页的主文件,它包含了页面的基本结构和引用外部资源的链接。在HTML中,我们需要设置一系列的图片元素(`&lt;img&gt;`标签)...

    js鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容

    在JavaScript(JS)编程中,实现“鼠标滑过图片,在图片上方蒙上一层透明层显示详情内容”的功能是一项常见的交互设计。这个功能可以提升用户体验,让用户在不离开当前页面的情况下查看图片的相关信息。下面我们将...

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

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

    JS动态可控制左右滚动的图片代码.rar

    "JS动态可控制左右滚动的图片代码" 描述简洁明了,确认了这个代码是用于实现JavaScript控制的图片滚动功能。这个描述暗示了代码可能包含事件监听、DOM操作以及动画效果等元素。 【标签解析】 "JS特效-图片相册" 这...

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

    在这个“js焦点图切换按钮控制大小图片滚动.rar”压缩包中,我们推测包含的资源是用于实现一个JavaScript和jQuery驱动的图片轮播效果,这种效果常见于网站的大屏展示区域,为用户提供动态的视觉体验。 图片大屏滚动...

    JS控制浏览新闻图片。

    总之,使用JavaScript控制新闻图片浏览涉及DOM操作、事件监听、响应式设计等多个方面,需要对JavaScript有扎实的基础。在实际项目中,还需要考虑兼容性问题,尤其是对老旧浏览器如IE8的支持,这往往需要更多的适配和...

    js图片显示

    在JavaScript(JS)中,图片显示是网页...以上就是JavaScript显示图片的一些主要方法和技术,涵盖了基本显示、性能优化和用户体验等多个方面。在实际开发中,结合HTML和CSS,可以创建出丰富的、高性能的图片展示效果。

Global site tag (gtag.js) - Google Analytics