JS控制图片大小（自动调整图片大小，图片保持相对尺寸）

最新推荐文章于 2024-06-30 16:22:52 发布
转载 最新推荐文章于 2024-06-30 16:22:52 发布 · 1.1k 阅读 · 1
文章标签：

#javascript #xhtml #image #html #border #function

本文介绍了一种通过JavaScript实现的图片自适应显示方法，确保图片能在指定区域内按比例缩放而不失真。此方法适用于固定尺寸的展示区域，能够根据图片原始尺寸调整其宽高比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<script language="javascript" type="text/javascript"><!--   
var flag=false;   
function limitImage(ImgD){   
    var areaWidth = 110; //你放置图片区域的宽度。  
    var areaHeight = 120; //你放置图片区域的高度。  
    var image=new Image();   
    image.src=ImgD.src;   
    if(image.width>0 && image.height>0){   
        flag=true;   
        if(image.width/image.height>= areaWidth/areaHeight){   
            if(image.width>areaWidth){   
                ImgD.width=areaWidth;   
                ImgD.height=(image.height*areaWidth)/image.width;   
            }else{   
                ImgD.width=image.width;   
                ImgD.height=image.height;   
            }   
            ImgD.alt=image.width+"×"+image.height;   
        }else{   
            if(image.height>areaHeight){   
                ImgD.height=areaHeight;   
                ImgD.width=(image.width*areaHeight)/image.height;   
            }else{   
                ImgD.width=image.width;   
                ImgD.height=image.height;   
            }   
            ImgD.alt=image.width+"×"+image.height;   
        }   
    }   
}   
//-->   
</script>
<img src="msgbg.gif" border="0" onload="javascript:limitImage(this);" />
</body>
</html>

js实现图片的大小自适应效果
anchuan0625的博客
12-29 1094
需求是传过来一个图片，根据外层div的大小自动进行缩放效果。 function ShowSecondImg(v) { var rate, newX, newY,newW, newH = 0; //表示图片相对窗口的缩放比例 var imgW, imgH; var centerW = $(window).width() - $("#alarmQueu...
js 控制图片大小
Francis.Hu--技术的巅峰
10-09 1163
缩放图片脚本分享 New Document function AutoResizeImage(maxWidth,maxHeight){ var objImg = document.getElementById("operImg"); var img = new Image(); img.src = objImg.src; var
面试问题（连更中............）
weixin_68266812的博客
06-05 631
​ vue2 beforeCreate（创建前） created（创建后） beforeMount(载入前),（挂载） mounted（载入后） beforeUpdate（更新前） updated（更新后） beforeDestroy（销毁前） destroyed（销毁后） vue3 setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method onBeforeMount() : 组件挂载到节点上之前执行的函数。 onMounted(
js限制上传图片大小
laiyuan999的博客
01-22 1066
需求：前端页面开发中，常遇到图片上传的需求，一般要求限制图片格式及大小。 说明：这里就把实现此功能所需代码贴出来，供同志们参考，也方便我以后复用。 要点：1.处理 类型type为file的输入元素的value值，进行判断。2.处理类型type为file的输入元素的files[0].size值。 备注：当然value和 size都是浏览器提供的api 代码：
JS实现图片大小自适应且位置居中，防止图片变形
Carey
05-11 8372
/* 2016-7-29 图片大小自适应，防止图片变形 其中 maxWidth 是图片显示的最大宽度，maxHeight 是图片显示的最大高度，1.均为0则不进行缩放， 2.maxWidth=0，且实际高度>maxHeight时，以高度缩放比例缩小， 3.maxHeight=0，且实际宽度>maxWidth时，以宽度缩放比例缩小， 4.实际高度>maxHeight，且实际宽度>maxWi
css+js完美控制图片大小
12-08
### CSS+JS完美控制图片大小 #### 知识点概述 在网页设计中，图片的显示效果直接影响到页面的整体美观度。为了使图片能够在不同尺寸的屏幕或容器中良好展示，通常需要对图片进行响应式处理。通过CSS（层叠样式表）...
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】
10-17
通过设置CSS样式和JavaScript动态计算，图片能够自动调整大小和位置，保证水平垂直居中显示。这通常通过设置图片的最大宽度和高度为100%，以及使用绝对定位来实现。 5. **多张图片放大镜的实现**： 示例中通过HTML...
vue2 在图片上打点 自定义图标、大小、颜色，可拖动放大缩小
06-27
图片的缩放可以通过修改其 CSS 的 `transform: scale()` 实现，同时需要调整标记的位置以保持相对图片的比例。 在实际项目中，你可能会遇到图片加载、标记保存与恢复、多用户协作等情况，这时可以结合Vuex进行状态...
js钢琴按钮波浪式图片排列效果代码分享
10-23
此外，通过计算图片与鼠标位置的相对距离，可以精确控制图片缩放的程度，从而形成波浪般的过渡效果。 为了确保效果能够正常工作，特别需要注意的是，每张图片的`alt`属性不能缺失，因为JavaScript可能会依赖这个...
js实现鼠标左右移动，图片也跟着移动效果
10-20
- **用户体验优化**：当前的效果是鼠标移动时图片跟随移动，可以增加一些额外的交互逻辑，比如当鼠标停止移动一段时间后，图片自动回到初始位置，或者提供一种让用户控制图片跟随移动开启或关闭的选项。 通过本篇...
保持原比例不变改变图片大小的JS,很好用,有实例
04-14
resizepic.js就是我整理的可保持原比例不变改变图片大小的JS,很好用,有实例index.htm。 原图显示（534 X 800） onload="AutoResizeImage(0,0,this) 1.按宽度250压缩,不限制高度 按比例压缩 onload="AutoResizeImage(250,0,this)" 2.按高度250压缩,不限制宽度 按比例压缩 onload="AutoResizeImage(0,250,this)" 3.按高度250宽度250 按比例压缩 onload="AutoResizeImage(250,250,this)" 4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。 onload="AutoResizeImage(400,512,this)" 5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。 onload="AutoResizeImage(300,600,this)" 6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示） 原图444 x 207,压缩为 500 x 600,将保持原图显示 onload="AutoResizeImage(500,600,this)"
js等比例缩放页面图片大小
07-25
js等比例缩放页面图片大小 // JavaScript Document function handle_img(tagimg_name,tagimg_width,tagimg_height){ var img_object=new Image(); var get_imgs=document.getElementsByName(tagimg_name); for(var i=0 ; i<get_imgs.length ; i++){ img_object.src=get_imgs[i].src; //上传的图片宽高均在tagimg_width和tagimg_height以内。则原图片显示 if(img_object.width<=tagimg_width && img_object.height<=tagimg_height){ get_imgs[i].height=img_object.height; get_imgs[i].width=img_object.width; } //如果宽度超过了tagimg_width if(img_object.width>tagimg_width){ if(tagimg_width/img_object.width*img_object.height>tagimg_height){ var w_width=tagimg_width/img_object.width*img_object.height; get_imgs[i].width=(tagimg_height/w_width)*tagimg_width; get_imgs[i].height=tagimg_height; }else{ get_imgs[i].height=tagimg_width/img_object.width*img_object.height; get_imgs[i].width=tagimg_width; } } //如果高度超过了tagimg_height if(img_object.height>tagimg_height){ if(tagimg_height/img_object.height*img_object.width>tagimg_width){ var h_height=tagimg_height/img_object.height*img_object.width; get_imgs[i].height=(tagimg_width/h_height)*tagimg_height; get_imgs[i].width=tagimg_width; }else{ get_imgs[i].width=tagimg_height/img_object.height*img_object.width; get_imgs[i].height=tagimg_height; } } } } //handle_img(tagimg_name,tagimg_width,tagimg_height) 页面加载完毕后调用该函数即可 //第一个参数为 页面当中img标记的name值 //第二个参数为 将要设定预览图片的宽度 //第三个参数为 将要设定预览图片的高度
js 上传图片文件，限制格式、大小和尺寸
tuoniaoxs的博客
04-23 1万+
通过js限制上传图片 前言 做前端项目时，经常会用到form表单，偶尔也会用到input标签来提交上传图片文件。在上传文件时，有时候会有一定的条件，比如图片格式、大小及尺寸。 通过js，可以在前端来设置上传图片的格式、尺寸及大小，并验证。 主要方法 1、设置上传图片的格式 jsp代码，设置form表单的input标签 <input type="file" id="file" name="file" onchange="verificationPicFile(this);verificationPicF
js实现图片宽为屏幕宽，高度自适应
最新发布
m0_72684019的博客
06-30 674
【代码】js实现图片宽为屏幕宽，高度自适应。
js 限制上传图片
qq_33240556的博客
03-07 560
在JavaScript中限制上传图片的格式、大小和尺寸，通常涉及监听元素的change事件，在用户选择文件后进行验证。
js原生实现图片上传尺寸及大小控制
weixin_57182748的博客
02-18 1752
原生js实现图片上传类型、大小、尺寸限制
用JS控制图片大小按比例放缩或扩大图片
gaogao0603的专栏
07-09 3157
<br />第一个： 按比例扩大或缩小图片<br /><br /> <HTML> <br /> <HEAD> <br /> <TITLE> New Document </TITLE> <br /> <script language="JavaScript"> <br /> <!-- <br /> var flag=false; <br /> function DrawImage(ImgD){ <br /> var image=new Image(); <br /> image.
js 判断上传图片尺寸大小(var img =new Image())
热门推荐
在路上的小马达
08-11 4万+
上传时常常会碰到限制图片尺寸的需求，而在后台通过byte判断大小，虽可行，但如果在JS中判断显然是更好的选择，尤其是在不限制文件大小，只限制尺寸时。  通常会使用创建Image对象，或添加一个来获取， 1.img标签方式   function uploadFile() { var imgWidth =
js实现图片大小撑满容器，但不改变原始比例
sunxinyi9978的博客
12-14 536
js实现图片大小撑满容器，但不改变原始比例。
实现图片banner宽度自动适配浏览器全屏效果
在现代网页设计中，实现图片banner宽度自适应浏览器是一个常见的需求，尤其是在响应式设计中，为了提升用户体验，常常需要让网页元素尤其是图片能够根据浏览器窗口的大小自动调整其尺寸。图片自适应技术可以确保在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值