css样式小结和脚本实现图片按比例缩放

1.用css3做圆形图片

在用css3做圆形图片的时候

有的浏览器会出现这种情况，发现边框已经变圆，但图片还是方的。

解决办法是，看图片有没有border，有的话把border变成0！

如果需要一个边框，

可以在外面设置一个div

div的宽高等于img的宽高

border-radius=(高+border)/2

例：

.divpichead{
    width:76px;
    height:76px;
    border:3px solid  white;
    -moz-border-radius: 41px;
    -webkit-border-radius:41x;
    border-radius:41px;
    position:absolute;
}
.pichead{
    width:76px;
    height:76px;
    border:0px solid  white;
    -moz-border-radius: 38px;
    -webkit-border-radius:38px;
    border-radius:38px;
    position:absolute;
}

2.div中的图片左右居中并且上下居中。

text-align:center ;vertical-align: middle;display:table-cell;

3.图片按比例缩放，这个是用脚本实现的了，很好用！

function AutoResizeImage(maxWidth, maxHeight, objImg) {
    var img = new Image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var w = img.width;
    var h = img.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (maxWidth == 0 && maxHeight == 0) {
        Ratio = 1;
    } else if (maxWidth == 0) {//
        if (hRatio < 1) Ratio = hRatio;
    } else if (maxHeight == 0) {
        if (wRatio < 1) Ratio = wRatio;
    } else if (wRatio < 1 || hRatio < 1) {
        Ratio = (wRatio <= hRatio ? wRatio : hRatio);
    }
    if (Ratio < 1) {
        w = w * Ratio;
        h = h * Ratio;
    }
    objImg.height = h;
    objImg.width = w;
}