zoukankan      html  css  js  c++  java
  • 让图片自适应大小的方法

    昨天在和动漫网站开发人员的交流中发现一个问题,就是新闻详细页面中的图片不会自适应大小,这其实是一个非常常见的问题,目前我所知的解决办法有以下几种:
    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>

  • 相关阅读:
    javascript入门教程笔记
    杭电2025
    杭电 2024
    杭电2019
    UEditor编辑器上传图片开发流程
    js操作textarea方法集合
    ueditor编辑器和at.js集成
    js分页算法
    js获取url中的参数
    第7章函数表达式笔记
  • 原文地址:https://www.cnblogs.com/mrhgw/p/532099.html
Copyright © 2011-2022 走看看