zoukankan      html  css  js  c++  java
  • JS使图片在图片框中自适应,按比例缩放

    <script type="text/javascript">

            //ImgD:要放图片的img元素,onload时传参可用this

            //h:img元素的高度,像素

            //w:img元素的宽度,像素
            function autosize2(ImgD,h,w)
            {
                var image=new Image(); 
                image.src=ImgD.src; 
                if (image.width<w && image.height<h)
                {
                    ImgD.width=image.width;
                    ImgD.height=image.height;
                }
                else
                {
                    if (w / h <= image.width / image.height)
                    {
                        ImgD.width=w;
                        ImgD.height=w * (image.height / image.width);
                    }
                    else
                    {
                        ImgD.width=h * (image.width / image.height);
                        ImgD.height=h;
                    }
                }
                
                //图片居中,IE8有效果,IE9,火狐无效果,请在页面用table居中
                //ImgD.style.paddingLeft = (w + 20 - ImgD.width) / 2;   //20是指padding-left和padding-right距离的和
                //ImgD.style.paddingTop=(h + 20 -ImgD.height) / 2;     //20是指padding-top和padding-bottom距离的和
            }
        </script>

         在图上加载时调用这个函数(img的onload事件)

  • 相关阅读:
    [luogu p4447] [AHOI2018初中组]分组
    咕咕咕通知
    [luogu p3817] 小A的糖果
    [luogu p1228] 地毯填补问题
    [luogu p1259] 黑白棋子的移动
    [luogu p3612] [USACO17JAN]Secret Cow Code S
    [luogu p1990] 覆盖墙壁
    [luogu p1928] 外星密码
    [luogu p2036] Perket
    [luogu p2392] kkksc03考前临时抱佛脚
  • 原文地址:https://www.cnblogs.com/wsir/p/5577273.html
Copyright © 2011-2022 走看看