Javascript 在固定宽度div中缩放图像，使图像之间的距离相等

所以，这不是我写的，但现在我正试图修复它

我有一个固定宽度的div，可以显示5幅图像。这些图像的大小都相同，但我们希望根据css类对其进行缩放。这是在drupal中完成的，因此实际缩放图像将非常棘手，当前的解决方案是在CSS中缩放图像。问题是这样做时，每个图像之间的间距不相等

一张图片抵得上千言万语，因此下面是对当前实现的修改：

以及我所说内容的图形视图：

因此，这里的目标是获得相同的输出，但每个图像之间的距离相等。我尝试了很多事情，但运气不好。。。我已经找到了只使用文本或固定宽度图像来实现这一点的方法，但这里似乎没有任何方法可以做到这一点。我还尝试在.field content上设置一个像素宽度，然后在img上设置100%宽度，这样div与缩放图像的宽度相同，但我仍然无法找出如何使它们等距

我认为在javascript中这样做也是一种选择。我更喜欢直接的css，但如果不可能的话，我们可以使用javascript

有什么意见吗

当前示例html：

<div id="container">
<div class="field field-1">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-2">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-3">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-4">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>
<div class="field field-5">
    <div class="field-content">
        <a href="/">
            <img src="http://placehold.it/135x150" width="135" height="150" />
        </a>
    </div>
</div>

---

这应该是你想要的：

#container {
    width: 730px;
}    
.field {
    display: inline-block;
    text-align: center;
}
.field-1 {
    width: 115px;
}
.field-2 {
    width: 125px;
}
.field-3 {
    width: 135px;
}
.field-4 {
    width: 125px;
}
.field-5 {
    width: 115px;
}
.field img {
    height: auto;
    width: 100%;
}

---

我把事情简化了一点

CSS

---

然后您只需使用左边距、容器大小/位置、图像大小等。

表格可能会起作用。尝试

display:table

和

display:table cell

然后可以将图像居中。我还尝试在.field content上设置一个以像素为单位的宽度，然后在img上设置100%的宽度，以便div与缩放图像的宽度相同，但我仍然无法确定如何使它们等距。这本应该完成任务的，为什么不起作用？这就是我尝试过的。但它所做的只是使所有包含的div与缩放图像的大小相同。它并没有把它们分散开来，所以它们只是在左边相互堆叠，我还没能找到一种方法让它们“合理”起来。在容器上放置文本对齐：justify没有任何作用。这里有一个更新的小提琴：

#container {
    width: 730px;
}    
.field {
    display: inline-block;
    text-align: center;
}
.field-1 {
    width: 115px;
}
.field-2 {
    width: 125px;
}
.field-3 {
    width: 135px;
}
.field-4 {
    width: 125px;
}
.field-5 {
    width: 115px;
}
.field img {
    height: auto;
    width: 100%;
}

#container {
    width: 730px;
    border: 0px solid black;
}

.field {
    width: 142px;
    float: left;
    text-align: center;
    margin-left: 2px;
}