通过js等比扩大图片的比例

最新推荐文章于 2024-08-18 20:44:12 发布
最新推荐文章于 2024-08-18 20:44:12 发布 · 279 阅读 · 0
文章标签：

#JavaScript #Gmail #HTML #Web #.net #ViewUI

本文介绍了一种使用JavaScript进行图片等比缩放的方法。在Web开发中，为确保图片在固定容器内完整显示且不失真，通过计算合适的缩放比例调整图片尺寸。
通过js等比扩大图片的比例
 
在做web开发的时候，显示图片是经常用到。在默认的情况下图片是扩充，但是有的时候显示效果会不如人意。有时容器的大小是固定的，我们要把图片等比扩大。
下面通过js来简单的实现图片等比扩大。
 
var imgObj = new Image(); // 图片对象
imgObj.src = "d:\linuxborder.jpg" ;     // 图片地址

imgwidth = imgObj.width;    // 图片宽

imgheight = imgObj.height;   // 图片高
 
document.all("myimg").width = imgwidth * rate;        // 改变图片宽

document.all("myimg").height = imgheight * rate;       //改变图片高

 
  “myimg”是<img name="myimg">中的name
 
事例代码：
 
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312">

</head>
<body onload = changesize()>
<center> images:

       <table border="1" width="445" height="140" bordercolor="#FF6600" cellSpacing=0 cellPadding=0>

        <HR style="border:1 dashed green" width="100%" SIZE=4>

        <tr>

          <td>

            <p align="center">      

              <img name="myimg" src="d:\linuxborder.jpg" width="440" height="140"></p>

          </td>

        </tr>

      </table>

</center>
</body>

<script language="javascript" type="text/javascript">

function changesize(){
        var imgwidth;
        var imgheight;
        var imgObj = new Image(); // 图片对象
        var tempwidth;
        var tempheight;

        var rate;     // 扩大率

        

        imgObj.src = "d:\linuxborder.jpg" ; // 图片地址

        imgwidth = imgObj.width;   // 图片宽
        imgheight = imgObj.height;      // 图片高
        
        tempwidth = 440 - imgwidth;
        tempheight = 140 - imgheight;
        if(tempwidth < tempheight) {

             rate = 440 / imgwidth ; 

        } else {

             rate = 140 / imgheight;

        }
        

        document.all("myimg").width = imgwidth * rate;             //改变图片宽

        document.all("myimg").height = imgheight * rate;     //改变图片高

}    
 
</script>
</html>
  BY: Border
 borderj#gmail.com
blog.youkuaiyun.com/border1985


borderj
关注
js实现放大镜效果(图片放大)—JavaScript
原地起飞
11-10 1万+
类似于放大镜效果的图片放大效果，学到了才知道什么叫做人外有人！！！！
可视化大屏自适应：autofit.js 一行搞定布局
最新发布
IT_1024的博客
08-29 1892
当浏览器窗口比设计稿大或者小的时候，就应该触发缩放，但是比例不一定，如果按照scale等比缩放时，宽度从1920缩小0.8倍也就是1536，而高度缩小0.8也就是743，如果此时浏览器高度过高，那么就会出现下方的白边，根据高材生所说的，缩小0.8后只需要放大八分之十就可以变回原大小，所以以现在的高度743*1.25=928，使宽度=928px就可以完全充满白边！也就是说，当屏幕右侧有白边时，我们就让宽度多出一个白边的px，当屏幕下方有白边时，我们就让高度多出一个白边的px。
js实现图片等比例缩放
06-09
js实现图片等比例缩放 我将网络上流传的，改成了横向居中和纵向居中，非常实用。
JS实现控制图片显示大小的方法【图片等比例缩放功能】
12-12
本文实例讲述了JS实现控制图片显示大小的方法。分享给大家供大家参考，具体如下： <!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=utf-8" /> <title>最新javascr
js实现图片的等比例缩放
weixin_33774615的博客
03-06 2001
  js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgObj * 缩放图片源对象 * @param maxWidth * 允许缩放的最大宽度 * @param maxHeight * 允...
精选资源
多边形等距扩大或缩小算法JS实现
03-30
输入多边形拐点坐标数组，和缩放系数r,可计算出扩大或缩小后的多形性坐标
怎么实现跳过缓冲区操作 向外原比例扩大
03-12
好的，用户问的是如何实现“跳过缓冲区操作，向外原比例扩大”。首先，我需要理解用户的具体需求。用户可能在使用Turf.js的buffer函数时，发现设置steps为0并不能取消缓冲区操作，而是被强制修正为1，导致生成的缓冲...
前端css动画缩放transform: scale()
weixin_58694594的博客
08-18 712
鼠标放上去就可以缩小放大了。
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
JavaScript实现网页图片等比例缩放 图片等比例缩放
01-27
JavaScript实现网页图片等比例缩放 JS效果 JS效果特效 图片等比例缩放
JS图片等比例缩放方法完整示例
10-21
主要介绍了JS图片等比例缩放方法,结合完整实例形式分析了javascript针对页面图片元素属性操作的相关技巧,需要的朋友可以参考下
js实现图片局部等比放大
S405832135的博客
09-15 399
我们在浏览例如淘宝等网站的时候，经常能见到这样的效果 左边是一张完整的图片，当你的鼠标光标放置在图片上的时候，左边图片会在光标的对应位置产生一个半透明的矩形，在右边会产生一个和左边图片等大的局部放大图。 模拟实现放大镜的效果，今天，我就来说说如何使用js实现这样的效果。 <!DOCTYPE html> <html lang="en"> <h...
【小5聊】纯javascript实现图片放大镜效果
小5聊的博客
11-27 1161
实现图片放大镜效果，其实就是一个比例放大的效果 以下通过纯javascript方式对图片进行等比例放大
js进行图片的等比缩放（转自yayayaangel的百度空间）
weixin_30677617的博客
07-30 276
代码如下：<script type="text/javascript">function rs(el){//首先判断图片是长的还是宽的。如果是长的就对宽进行变形，否先对高进行变形 (el.width>el.height)?el.width = Math.min(65,el.width):el.height = Math.min(65,el.height);}</scr...
JS实现等比例缩放图片
weixin_42599560的博客
01-09 2517
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码： <div id="demo1"> <img src="http://img01.taobao...
js 上传图片等比例缩放
qq_40946635的博客
09-04 1586
在JavaScript中，可以使用HTML5的Canvas元素以及相关的API来实现图片等比例缩放成特定像素。如何在JavaScript中将上传的图片等比例缩放成特定像素？
js等比例缩放图片
shy_snow的专栏
01-17 2876
 有时网页很容易被大图片撑开，下面的js小技巧可以用来解决这个问题。js获得图片大小和容器的大小进行比较然后重新设置图片的显示大小，示例如下：Code: 有时网页很容易被大图片撑开，下面的小技巧可以用来解决这个问题：    script language="JavaScript" type="text/javascript">  
JS控制图片显示的大小（图片等比例缩放）
liaobc的专栏
03-01 7137
JS控制图片显示的大小（图片等比例缩放） http://www.cnblogs.com/czh-liyu/archive/2007/12/25/1014841.html         代码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHigh
实现图片等比缩放的JavaScript代码
下面，我们将详细探讨如何通过JavaScript（简称JS）来控制图片进行等比输出，以及等比输出背后所涉及的技术知识点。 ### 1. 等比缩放的基本概念 等比缩放，简而言之，是指在调整图片尺寸的过程中，保持图片的宽高...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值