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

最新推荐文章于 2023-09-04 15:27:00 发布
最新推荐文章于 2023-09-04 15:27:00 发布
阅读量1.9k 收藏
点赞数
分类专栏： Java 文章标签： border image javascript web开发 function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/border1985/article/details/869450
版权
通过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.csdn.net/border1985
border1985
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 图片比例 js,js自动等比例设置图片尺寸大小
weixin_29603489的博客
06-22 749
css 图片等比例缩放首页产品展示的图片都变形了，客户要求图片等比例大小，和产品展示的效果一样：css控制图.网站的内容页面，经常要放图片，如果图片太大会撑出，影响页面美观。> HTML``````> JS```$("#photo").click(function(){showImg($(this));});function showImg(imgData开始时间主要采用js之类的做的...
js 图片加载时 按比例设置图片宽高_js设置图片宽高比例缩放
weixin_39577289的博客
12-22 2436
做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。1、最小尺寸分辨率1024*768(传统17寸显示器)，则可以采用940px、960px、或者常用的980px作为最小宽度2、1024...
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控制图片显示的大小（图片等比例缩放）
liaobc的专栏
03-01 7055
JS控制图片显示的大小（图片等比例缩放） http://www.cnblogs.com/czh-liyu/archive/2007/12/25/1014841.html         代码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHigh
js实现放大镜效果(图片放大)—JavaScript
热门推荐
原地起飞
11-10 1万+
类似于放大镜效果的图片放大效果，学到了才知道什么叫做人外有人！！！！
JS图片等比例缩放方法完整示例
10-21
总结来说，JavaScript的图片等比例缩放技术是通过计算图片原始尺寸与目标尺寸之间的比例，然后调整图片元素的宽度和高度来实现的。这不仅可以保持图片的原始比例，还能确保在不同屏幕尺寸下图片的视觉效果。在实际...
JavaScript等比例缩放图片控制超出范围的图片
12-11
这时，JavaScript 的图片等比例缩放功能就显得尤为重要。本文将详细解析如何使用 JavaScript 实现等比例缩放图片，以控制其超出预设范围。 首先，我们来看一段实现这一功能的 JavaScript 代码： ```html 等比例...
javascript实现获取图片大小及图片等比缩放的方法
10-21
主要介绍了javascript实现获取图片大小及图片等比缩放的方法,涉及javascript针对图形图像相关属性获取与修改相关操作技巧,需要的朋友可以参考下
js实现图片等比缩略显示 支持IE/FF
10-31
该方法可以兼容IE和FF浏览器，通过使用JavaScript来实现图片等比缩略显示，避免了浏览器的兼容性问题。 知识点5：onload事件的使用 onload事件可以在图片加载完成后触发，用于执行JavaScript代码。在本例中，...
js实现图片等比例缩放
06-09
js实现图片等比例缩放 我将网络上流传的，改成了横向居中和纵向居中，非常实用。
js+CSS 图片等比缩小并垂直居中实现代码
10-30
该示例介绍的是如何使用JavaScript和CSS来实现图片的等比缩小并垂直居中的方法。在Web开发中，保持图片的原始比例缩放并确保它们在容器内居中对齐是一项常见的需求，尤其是在响应式设计中。下面我们将详细讨论这个...
JavaScript图片放大效果详解
besily的专栏
03-19 1527
效果：运行代码框Magnifier#magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000;}#img{ width:342px; height:420p
【小5聊】纯javascript实现图片放大镜效果
小5聊的博客
11-27 914
实现图片放大镜效果，其实就是一个比例放大的效果 以下通过纯javascript方式对图片进行等比例放大
js 上传图片等比例缩放
最新发布
qq_40946635的博客
09-04 1115
在JavaScript中，可以使用HTML5的Canvas元素以及相关的API来实现图片等比例缩放成特定像素。如何在JavaScript中将上传的图片等比例缩放成特定像素？
如何使用JS等比例改变显示图片的大小
LeeJay5的专栏
10-31 3579
当你在JSP页面或是HTML页面，显示图片需要控制其大小时，则可以使用以下方法： 法一：        function imgSize(ImgD,imgW,imgH){     var image=new Image();     image.src=ImgD.src;     if(image.width>0 && image.height>0){      if(image
JS实现等比例缩放图片
weixin_42599560的博客
01-09 2348
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码： <div id="demo1"> <img src="http://img01.taobao...
JS实现按比例缩放图片的方法(附C#版代码)
满天星
05-25 392
本文实例讲述了JS实现按比例缩放图片的方法。分享给大家供大家参考，具体如下： js版本： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 function resizeImage(obj, MaxW, MaxH)
js 等比压缩图片
05-27
可以使用canvas实现js等比压缩图片。具体步骤如下： 1. 创建一个Image对象，将需要压缩的图片加载进来。 2. 使用canvas创建一个画布，并设置画布的宽度和高度。 3. 计算图片的宽高比例，根据比例计算出压缩后的图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值