通过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
# javascript
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生