您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> java >> 正文

使用CSS和Javascript控制网页图片宽度的大小的方法

作者:佚名    责任编辑:admin    更新时间:2022-06-22

class="area">               使用CSS和Javascript控制网页图片宽度的大小的方法,根据最近电脑知识吧的小编最新开发的项目需求得出的分析:

第一个方法是使用CSS来实现控制大小:

img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width); max-height:590px;
height:expression(this.height>590?"590px":this.height);
}

如果你要兼容IE6的话,可以配合使用以前介绍的这个Javascript脚本。

第二个方法是使用Javascript来控制控制网页图片宽度的大小:

function set_img_size(obj, width)
{
    if (!obj) return ;
    if (!width) {
        width = obj.clientWidth * 0.9;
        if (width < 400) return; /*设置图片的限定宽度*/
    }
    img_items = obj.getElementsByTagName("img")
    if (img_items)  {
        for (i=0; i<img_items.length; i++) {
            var s_width = img_items[i].width;
            var s_height = img_items[i].height;
            if (s_width > width) {
                img_items[i].style.width = width + "px";
                if (s_height == img_items[i].height) {
                    img_items[i].style.height = ((width / s_width) * img_items[i].height) + "px";
                }
                img_items[i].onclick = function() {window.open(this.src)};
                img_items[i].style.cursor = "pointer";
                img_items[i].alt = "点击查看原始尺寸";
            }
        }
    }
}   

function selfadaptation_size() {
    if (typeof(content_img_width) == 'undefined')
        set_img_size(document.getElementById("posts")); /*控制图片所在的元素ID号*/
    else
        set_img_size(document.getElementById("posts"), content_img_width); /*控制图片所在的元素ID号*/   

    set_img_size(document.getElementById("custom")); /*控制图片所在的元素ID号*/
}   

if (window.addEventListener)
    window.addEventListener("load", selfadaptation_size, false);
else if (window.attachEvent)
    window.attachEvent("onload", selfadaptation_size);
else
    window.onload = selfadaptation_size;