Javascript 强制不同的图像具有相同的高度，以便组合宽度填充固定div

在过去的几个小时里，我一直在寻找一种简化我目前手动操作的方法。我有一些div将我所有的图像缩放到500px的宽度。这通常很好，但我的一些图像太小，无法缩放到那么宽

所以我试着将这些较小的图像并排放在一个新的500px宽的div中。这些较小的图像通常彼此具有不同的高度/宽度比，所以我强制它们在高度+/-1像素上相等，这样它们的组合宽度将为500px。这样可以使外部边缘与其上方或下方的单个图像的边缘精确对齐。在本例中，我手动设置每个图像的高度，如下所示：

    <!-- SIDE BY SIDE DIV -->    
<div style="width:500px;"> 
    <!-- IMAGE 01 -->
<div class="postContainer" id="imgContainer">
    <a href="http://example.com/example.jpg" imageanchor="1">
    <img height="248px" src="http://example.com/example.jpg" /></a>
        <div class="postTextbox">
            <div class="postText">Snappy comment.</div>
        </div>
    </div>
    <!-- IMAGE 02 -->
<div class="postContainer" id="imgContainer">
    <a href="http://example.com/example.jpg" imageanchor="1">
    <img height="248px" src="http://example.com/example.jpg" /></a>
        <!-- <div class="postTextbox"><div class="postText">NO COMMENT.</div></div> --></div>
</div>
    <!-- END SIDE BY SIDE DIV -->

在FireFox或IE中，这样的图像就不会跳到下一行了。虽然IE中最外层的图像边缘不是完全对齐的像素，但对我来说已经足够近了

我知道“中心”标签已经被弃用了，所以我也将删除它

---

这是一个新的工作示例：

因为这需要使用多个元素的值进行计算，所以不能使用纯CSS来完成。因此，确实需要一些脚本来完成这项工作

数学应该很清楚。如果你有两个图像宽度*高度，一个大小为a*B，另一个大小为X*Y，你可以得出以下等式，其中.n标记新值，r和s为比例比：

Bn = Yn
An + Xn = 500

An = r * A, Bn = r * B
Xn = s * X, Yn = s * Y

s = 500 / ( (Y * A / B) + X)

例如，两个大小分别为120*50px和200*300px的图像的公共高度为163px，宽度分别为392和108px，分别为392+108=500

---

因此，您需要编写一个脚本，从包含多个图像的div中检索图像路径，尽可能使用Filereader对象获取原始图像尺寸，将值插入公式中，并将新大小应用于图像标记。

我更新了您的小提琴以演示解决方案

您需要对所有图像进行排序，并将瘦小的图像配对，然后计算它们的新高度

var images = document.getElementsByTagName('img');

var tooSmall = []; // Collection of smallPairs
var smallPair = []; // a pair of images to shrink

// Calculates width after first shrink
var newWidth = function (image, newHeight) {
    return image.naturalWidth * (newHeight/image.naturalHeight);
};

// If a single image is too narrow, grab the next regardless of its width
for(var i=0;i<images.length;i++) {
    if (smallPair.length !== 1 && (images[i].naturalWidth > 500 || smallPair.length > 1)) {        
        // Shrink any image too wide
        if(images[i].naturalWidth > 500) {
            images[i].setAttribute('width','500px');
        }        
        if(smallPair.length > 1) {
            tooSmall.push(smallPair);
        }
        smallPair = [];
    }
    else {
        smallPair.push(images[i]);
    } 
}

// Loop through image pairs and shrink them
for(var i=0;i<tooSmall.length;i++) {
    var newHeight = tooSmall[i][0].naturalHeight;
    if(tooSmall[i][1].naturalHeight < newHeight) {
        newHeight = tooSmall[i][1].naturalHeight;
    }
    var totalWidth = newWidth(tooSmall[i][0], newHeight) + newWidth(tooSmall[i][1], newHeight);
    var sizeRatio = 496 / totalWidth; // Use 496 width to account for padding
    newHeight = Math.round(newHeight * sizeRatio);
    tooSmall[i][0].setAttribute('height', newHeight + 'px'); 
    tooSmall[i][1].setAttribute('height', newHeight + 'px');
}

---

如果您想创建一个静态页面，可能会有更简单的解决方案，但这两种方法都可以。如果您正在动态加载内容，还可以使用服务器端选项。

这真是太好了。这将很好地自动排列页面上的每个图像。我只是刚刚在javascript中弄湿了脚，但我要看看是否可以修改它，只缩小特定的标记图像，即使它们很大。这样我仍然可以选择并排显示哪些图像。我打算花点时间研究这个。谢谢！您可能会注意到，我删除了您在图像上放置的Id属性。Id属性在整个页面的上下文中应该是唯一的。如果要将搜索限制在选定的照片上，请为它们指定一个标识类，并使用“getElementsByClassName”。你也会注意到多个类可以通过用空格分隔来分配。我确实注意到了这一点。非常有用。看来我一直在滥用身份证，哎呀！我会回去用班级代替他们。谢谢你的帮助！大家好，我用基于您的示例编写的代码更新了我的问题。它的工作原理和我在Chrome上所希望的完全一样，但在IE和FireFox上的结果却不一样。我想知道你什么时候有空看看。调整大小似乎或多或少是正确的，但图像并不是局限于它们的div，而是向下移动到下一行。我如何强制其他浏览器像Chrome那样处理它？谢谢我在IE中查看了它，得到了与Chrome相同的结果。这可能是一种情况，在这种情况下，增加一点div宽度，让浏览器认为它有空间可能是一个解决方案-这有点黑客，但它应该工作。我知道这可能是简单的数学，但它仍然让我头晕目眩。你能解释一下当你在解决s时发生了什么吗？还有，如果你有三张图片而不是两张，那么同样的s方程会是什么样子？是否有一个方程可以处理任意数量的变量，或者该方程是否特定于您拥有的变量数量？感谢您对我的耐心：我最后使用了一个循环来解决我想使用一个与您的示例非常相似的等式来调整一行中两个以上图像大小的情况。再次感谢。

Bn = Yn
An + Xn = 500

An = r * A, Bn = r * B
Xn = s * X, Yn = s * Y

s = 500 / ( (Y * A / B) + X)

var images = document.getElementsByTagName('img');

var tooSmall = []; // Collection of smallPairs
var smallPair = []; // a pair of images to shrink

// Calculates width after first shrink
var newWidth = function (image, newHeight) {
    return image.naturalWidth * (newHeight/image.naturalHeight);
};

// If a single image is too narrow, grab the next regardless of its width
for(var i=0;i<images.length;i++) {
    if (smallPair.length !== 1 && (images[i].naturalWidth > 500 || smallPair.length > 1)) {        
        // Shrink any image too wide
        if(images[i].naturalWidth > 500) {
            images[i].setAttribute('width','500px');
        }        
        if(smallPair.length > 1) {
            tooSmall.push(smallPair);
        }
        smallPair = [];
    }
    else {
        smallPair.push(images[i]);
    } 
}

// Loop through image pairs and shrink them
for(var i=0;i<tooSmall.length;i++) {
    var newHeight = tooSmall[i][0].naturalHeight;
    if(tooSmall[i][1].naturalHeight < newHeight) {
        newHeight = tooSmall[i][1].naturalHeight;
    }
    var totalWidth = newWidth(tooSmall[i][0], newHeight) + newWidth(tooSmall[i][1], newHeight);
    var sizeRatio = 496 / totalWidth; // Use 496 width to account for padding
    newHeight = Math.round(newHeight * sizeRatio);
    tooSmall[i][0].setAttribute('height', newHeight + 'px'); 
    tooSmall[i][1].setAttribute('height', newHeight + 'px');
}