Tags标签 网战地图
当前位置: 主页 > 网页设计 > JavaScript >

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

2014-06-09 21:56 [JavaScript] 来源于:
导读:JorWang の 小喇叭:『 最近比較忙啊,暫時不更新了,大家玩得開心點哦!O(_)O~ 』 刚刚看到两个控制网页图片宽度的大小的方法,觉得很好很方便,特此分享给大

JorWang の 小喇叭:『 最近比較忙啊,暫時不更新了,大家玩得開心點哦!O(∩_∩)O~ 』

刚刚看到两个控制网页图片宽度的大小的方法,觉得很好很方便,特此分享给大家。

第一个方法是使用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;

如果你有更好更简洁的方法,分享给我吧,谢谢了!

(编辑:)

本文标签:
网友评论

栏目列表

推荐文章