javascript - 如何在javascript中操作多个图像的宽度

Question

我有多个图像，我想将它们全部放在一行中。我应该如何控制图像的宽度，使所有图像的宽度总和不超过浏览器的宽度。？？

Answer 1

如果你有可变宽度的图像，你可以使用这样的东西:

/**
*@param contId {string} id of the container element
*/
var imgResize = function(contId) {
    var imgs = [], totalWidth = 0, ratio = 0, containerWidth = 0;
    var cont = document.getElementById(contId);
    var child = cont.firstChild;
    while(child.nextSibling){
        if(child.tagName && child.tagName.toUpperCase() === 'IMG'){ 
            var imgW = child.clientWidth;
            imgs.push({node: child, width: imgW});
            totalWidth += imgW;
        }
        child = child.nextSibling;
    }
    ratio =  cont.clientWidth / totalWidth;

    imgs.forEach(function(img){
        var cWidth = Math.floor(ratio*img.width);
        img.node.style.cssText='width:'+cWidth+'px';
    });
};

/**
* Fire it on window resizes, ooohh shiny
*/
window.onresize=function(){imgResize('container');};

请记住，您可能应该做类似的事情

img{border:0px;display:block;float:right;}
.imgContainer{font-size:0px;padding:0px;width:100%;/*for example*/}

让它在低于现代浏览器的情况下工作留给读者作为练习。是的，使用框架是个好主意，我会推荐 YUI，它非常好，甚至俄罗斯人都知道使用它。