zoukankan      html  css  js  c++  java
  • 图片超过规定的大小就按原图片大小缩小

     

    我们经常会遇到在页面中的图片按照我们自己的大小来显示,这样可以让页面看起来更规范一些。 
    比如我们要在页面种显示130×160的图片,相当于我们将图片放入这样的一个相框那,超过的就缩放到这个框的大小,小的就原样显示。

      
        我们这里有2种解决办法, 
        1,不按照比例的缩放 <script language="javascript"> 
    function changeImg(mypic){ 
        var xw=130; 
        var xl=160; 

        var width = mypic.width; 
        var height = mypic.height; 
                         
        if (width > xw ) mypic.width = xw; 
        if (height > xl ) mypic.height = xl; 

    </script> 
    <img src="sh180.jpg" onload="changeImg(this)">     

    2,按照比例的缩放 
    <script language="javascript"> 
    function changeImg1(mypic){ 
        var xw=160; 
        var xl=180; 
             
        var width = mypic.width; 
        var height = mypic.height; 
        var bili = width/height;         
             
        var A=xw/width; 
        var B=xl/height; 
             
        if(A>1||B>1) 
        { 
            if(A<B) 
            { 
                mypic.width=xw; 
                mypic.height=xw/bili; 
            } 
            if(A>B) 
            { 
                mypic.width=xl*bili; 
                mypic.height=xl; 
            } 
        } 

    </script> 
    <img src="sh180.jpg" onload="changeImg(this)"> 

  • 相关阅读:
    webpack 命令行 传入自定义变量
    PHP 装饰器模式
    php图片合成【png图片】
    Sublime Text 3.1 3170 / 3176 注册码(附降级与禁止更新方法)
    菜鸟教程jsonp基础知识讲解
    CentOS7用yum安装软件提示 cannot find a valid baseurl for repobase7x86_64
    PHP的parse_ini_file()函数,解释结构类型php.ini格式的文件
    scp命令详解
    php常用错误码的意思
    php模式设计之 适配器模式
  • 原文地址:https://www.cnblogs.com/winner/p/385507.html
Copyright © 2011-2022 走看看