• 让图片自适应大小的方法


    昨天在和动漫网站开发人员的交流中发现一个问题,就是新闻详细页面中的图片不会自适应大小,这其实是一个非常常见的问题,目前我所知的解决办法有以下几种:
    1. 用后台程序自动生成缩略图
    2. 用css调用expression控制图片溢出后的大小;
    (http://www.blog.edu.cn/user1/7987/archives/2006/1440861.shtml )
    3. 用js写函数控制图片溢出后的大小;

    其中后两种都是javascript在起作用,但是工作原理不同,css中调用expression可以解决这个问题,但是解决得不好,因为如果页面中图片一多,expression中的语句会不断被调用,非常耗费客户端内存,容易导致浏览器假死;而直接用javascript,在页面onload的时候就可以轻松解决这个问题,而且只调用一次,比起expression真是好得太多,程序很简单,下面是个简单的例子,我假设这个页面图片宽度不能超过200px,而实际图片宽度是550px:

    <body>
    <img  id="achome" src="http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg" />
    </body>

    <script>
        var imageArr=document.getElementById(controlID);
        var imageRate = imageArr.offsetWidth / imageArr.offsetHeight;   
       
        if(imageArr.offsetWidth > maxWidth)
        {
            imageArr.style.width=maxWidth + "px";
            imageArr.style.Height=maxWidth / imageRate + "px";
        }
       
        if(imageArr.offsetHeight > maxHeight)
        {
            imageArr.style.width = maxHeight * imageRate + "px";
            imageArr.style.Height = maxHeight + "px";
        }

    </script>

  • 相关阅读:
    爱国论
    windows cmd: 打开windows系统程序或服务的常见命令
    Windows最常用的几个网络CMD命令总结
    什么是DNS劫持和DNS污染?
    windows cmd: 增强windows命令行
    NAT
    电信光纤猫 f412超级密码
    jvm之java类加载机制和类加载器(ClassLoader)的详解
    经典中的经典算法 动态规划(详细解释,从入门到实践,逐步讲解)
    首次适应算法、最佳适应算法和最差适应算法
  • 原文地址:https://www.cnblogs.com/mrhgw/p/532099.html
Copyright © 2020-2023  润新知