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

用js调整页面显示图片的大小

阅读更多
用途:调整图片显示时候的大小。

function DrawImage(ImgD,FitWidth,FitHeight){  
	var image=new Image();   
	image.src=ImgD.src;    
	if(image.width>0 && image.height>0){    
		if(image.width/image.height>= FitWidth/FitHeight){  
			if(image.width>FitWidth){
				ImgD.width=FitWidth;
				ImgD.height=(image.height*FitWidth)/image.width;    
			}else{
				ImgD.width=image.width;
				ImgD.height=image.height;
				}
			}else{ 
				if(image.height>FitHeight){
					ImgD.height=FitHeight; 
					ImgD.width=(image.width*FitHeight)/image.height; 
				}else{
					ImgD.width=image.width;      
					ImgD.height=image.height;
					}
				}
			}
	}

调用如下:
<img src="1148202890.jpg" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" />

分享到:
评论

相关推荐

    JavaScript调整页面字体大小

    综上所述,利用 JavaScript 结合 CSS 的字体大小属性,我们可以创建一个动态调整页面字体大小的功能,以适应不同用户的需求。这不仅可以提升用户体验,也有助于满足无障碍性和响应式设计的要求。通过实践和优化,...

    支持图片上传及实时显示,可设置显示图片的大小。由php、Ajax、javascript开发

    前端可以通过CSS或JavaScript调整预览图片的大小;后端处理可能涉及图像处理库,如PHP的GD库或Imagick,对上传的原始图片进行裁剪或缩放,以满足特定尺寸要求。 在提供的"ajaxUploadImage"文件中,应该包含了实现...

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

    在Web开发中,动态调整页面元素(如图片)的尺寸,样式和其他属性是构建动态交互式网页的基石。这种技术不仅可以用于图片缩放,还可以用于各种需要根据特定条件改变页面元素状态的场景,如响应式导航菜单、动态布局...

    纯HTML+js实现鼠标滚轮动态调整缩放图片大小

    纯HTML+js实现鼠标滚轮动态调整缩放图片大小 演示效果: https://www.bilibili.com/video/BV1pS4y167wJ/

    图片显示特效javascript

    本主题主要围绕"图片显示特效javascript"展开,探讨如何利用JavaScript实现各种图片展示的动态效果。 1. 图片加载:JavaScript可以监测图片的加载状态,例如使用`onload`事件来处理图片加载完成后执行的代码,确保...

    js控制页面字体大小

    JavaScript(简称JS)作为客户端编程语言,可以提供动态调整页面字体大小的功能。本文将深入探讨如何使用JavaScript来控制网页中的字体大小,以便为用户提供更友好的阅读体验。 首先,我们需要了解HTML中的字体单位...

    js实现页面展示图片

    本篇将详细讲解如何利用JavaScript将图片转换为Base64编码并在前端页面上显示,以及如何控制图片尺寸进行压缩。 首先,我们需要了解Base64编码。Base64是一种用于将二进制数据转化为可打印ASCII字符的编码方式。在...

    JavaScript 获取浏览器的显示区域大小信息

    在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器显示区域的相关尺寸信息。 #### 一、关键概念...

    通过JS自动调整图片的大小以适应div的高和宽

    在网页设计中,图片的展示效果对于用户体验至关重要。有时候,我们希望图片能够自动调整大小以适应其所在的div容器,同时保持原始的...这不仅提高了页面的响应性,还能确保图片在各种屏幕尺寸下都有良好的显示效果。

    若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小(公告页面)

    "若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小(公告页面)"是针对若依框架的一个功能增强,允许用户在上传图片后,通过拖拽的方式实时调整图片的大小,这极大地提升了用户的交互体验。 首先,我们需要...

    控制图片显示大小的代码

    如果需要根据窗口大小动态调整图片大小,可以使用JavaScript的`window`对象监听窗口的`resize`事件: ```javascript window.addEventListener('resize', function() { var img = document.getElementById('myImage...

    通过JAVAScript实现页面自适应.doc

    使用 JavaScript 可以实现页面自适应,通过获取屏幕的宽高,然后根据屏幕大小调整页面元素的宽高和位置。页面自适应的应用场景非常广泛,例如新版的 Yahoo 邮箱一样,让一些数据显示块可以根据页面大小进行自适应。

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

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

    js解决div内图片自适应大小

    本文将深入探讨如何利用纯JavaScript实现img图片在大小未知的div内自适应显示,并兼容不同浏览器,包括火狐、谷歌和IE6/7/8。 首先,我们来看一下基本的HTML结构,它包含一个div容器和一个img元素: ```html `...

    springmvc+jsp 图片列表分页,可调整显示大小

    在这个场景中,我们讨论的是如何使用SpringMVC来处理图片数据,并通过JSP和JavaScript实现图片列表的分页功能,同时允许用户调整显示的图片大小。 首先,让我们深入了解一下SpringMVC的控制器层。在SpringMVC中,...

    js实现点击图片放大照片

    例如,我们可以创建一个新的`&lt;div&gt;`作为放大镜容器,然后将原图片复制一份并调整大小放置其中: ```javascript var img = document.getElementById('thumbnail'); var enlargedImg = img.cloneNode(); enlargedImg....

    js自动修改图片尺寸

    ### JavaScript自动修改图片...通过上述几种方法,我们可以灵活地使用JavaScript来实现图片尺寸的自动调整功能。这对于提高网页加载速度、优化用户体验具有重要意义。开发者可以根据实际需求选择合适的方案进行实现。

    dragresize 可让用户调整页面DIV的大小和位置

    在网页设计和开发中,有时候我们需要提供用户交互式的界面元素,比如允许用户自定义调整页面上的某些区域(如DIV)的大小和位置。这能够增强用户的体验,让他们根据自己的需求来定制视图。"dragresize"就是这样一个...

    js按比例缩放图片且垂直居中显示图片

    "js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...

    js控制页面内图片同宽比例缩小

    "js控制页面内图片同宽比例缩小"这个主题聚焦于如何利用JavaScript动态调整图片尺寸,确保图片在不同设备和屏幕尺寸下保持正确的比例,避免图片变形。这通常涉及到图像的响应式布局,是现代Web开发中的一个常见需求...

Global site tag (gtag.js) - Google Analytics