`
lym6520
  • 浏览: 700902 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

js 控制 图片 大小

    博客分类:
  • JS
js 
阅读更多

/**
 * 控制图片比例大小
 * @param {} img    对象
 * @param {} width  最大宽度
 * @param {} height 最大高度
 */
var flag = false;
function imgSuitSize(ImgD, width, height){
	
	var image = new Image();
	var iwidth = width; // 定义允许图片宽度
	var iheight = height; // 定义允许图片高度
	image.src = ImgD.src;
	if (image.width > 0 && image.height > 0) {
		flag = true;
		if (image.width / image.height >= iwidth / iheight) {
			if (image.width > iwidth) {
				ImgD.width = iwidth;
				ImgD.height = (image.height * iwidth) / image.width;
			} else {
				ImgD.width = image.width;
				ImgD.height = image.height;
			}

			ImgD.alt = image.width + "×" + image.height;
		} else {
			if (image.height > iheight) {
				ImgD.height = iheight;
				ImgD.width = (image.width * iheight) / image.height;
			} else {
				ImgD.width = image.width;
				ImgD.height = image.height;
			}
			ImgD.alt = image.width + "×" + image.height;
		}
	}	
	
}


2
0
分享到:
评论

相关推荐

    js控制图片大小

    js控制图片大小,并验证图片类型,兼容各浏览器,测试可用

    JS控制图片大小(等比例缩放)

    JS控制图片大小(等比例缩放)

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

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

    JQuery控制图片大小代码

    下面将详细介绍jQuery控制图片大小的基本方法和相关知识点。 1. **获取图片元素** 在jQuery中,我们首先需要获取到图片元素。通常,我们可以使用`$("#imgId")`来选择具有特定ID的图片,或者`$(".imgClass")`来选择...

    js验证上传图片 大小 格式

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

    JS控制图片的大小

    javaScrpt控制图片的大小,希望可以帮助到你。

    JS控制图片上传大小

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

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

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

    jQuery插件 拖拽和鼠标滚轮控制图片大小

    本文将详细探讨如何利用jQuery插件实现拖拽和鼠标滚轮控制图片大小的功能,这对于创建交互式网页体验至关重要。 首先,我们要理解jQuery中的拖拽功能。拖拽通常用于创建可移动的元素,例如在网页上拖动一个图片或...

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

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

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

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

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

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

    控制图片显示大小的代码

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

    js控制上传图片的大小

    ### JS控制上传图片的大小 在现代Web应用中,对用户上传的图片进行尺寸限制是一项常见且实用的功能。本文将详细介绍如何使用JavaScript来实现这一功能,包括如何检测上传图片的大小,并在不符合要求时给予提示。 #...

    JS控制图片上下无缝滚动特效代码

    要实现JS控制图片上下无缝滚动,我们需要掌握以下几个关键知识点: 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作HTML元素,包括图片元素。我们需要获取到图片元素,例如使用`document....

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

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

    JS控制图片

    "JS控制图片,图片随鼠标移动"这个话题涉及到的是动态调整图像位置,使其跟随鼠标指针移动的技术。这种效果通常用于创建悬停指示器或者某种形式的游戏元素。下面我们将详细探讨如何实现这一功能。 首先,我们需要在...

    js 控制图片大小核心讲解

    首先,要控制图片大小,最直接的方法是通过HTML元素的属性进行调整。例如,通过设置`<img>`标签的`width`和`height`属性来改变图片尺寸。然而这种方法的局限性在于,它仅仅是按照设定的尺寸比例来拉伸或压缩图片,而...

    js控制图片等比输出

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

    js_图片拖拽位置和大小变换效果.zip

    当用户按下鼠标并移动时,可以通过监听`dragstart`、`drag`和`dragend`事件来控制图片的位置更新。在`dragstart`事件中,需要记录初始鼠标位置和图片的原始位置;在`drag`事件中,计算鼠标移动的距离,并将这个距离...

Global site tag (gtag.js) - Google Analytics