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，甚至俄罗斯人都知道使用它。

Answer 2

var width = (window.width / numImages) - margin;

Answer 3

为了能够同时将它们全部定位给它们所有相同的类，或者从包含的id中获取并按节点名称获取它们。定位后，获得宽度。

使用jquery将宽度变为变量：

var $allImages = $('img.myImages');//all images need the same class

var allImagesW = $allImages.width() * $allImages.length;//you might want to use .outerWidth() to account for borders and padding, and .outerWidth(true) to include margins.

var windowW = $(window).width();

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

3 个答案: