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

Question

所以，我没有写这篇文章，但现在我正在尝试修复它……

我有一个固定宽度的div，它可以显示5张图片。这些图像都是相同的大小，但我们希望基于css类对它们进行缩放。这是在drupal中完成的，所以实际上缩放图像会很棘手，当前的解决方案是在CSS中缩放它们。问题是，当这样做时，每个图像之间的间距是不相等的。

一张图片胜过千言万语，所以这里是当前实现的一个小插曲：http://jsfiddle.net/jCa7j/1/

以及我正在讨论的内容的图形视图：

​

​

因此，这里的目标是具有相同的输出，但每个图像之间的距离相等。我试过很多方法但都没什么好结果。我已经找到了仅对文本或固定宽度图像执行此操作的方法，但似乎没有一种方法能在这里做到这一点。我还尝试在.field-content上设置一个像素宽度，然后将宽度100%放在img上，这样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>

​

和当前示例css：

#container {
    width: 730px;
}

.field {
    width: 142px;
    display: inline-block;
    text-align: center;
}

.field img {
    height: auto;
}
.field-1 img {
    width: 70%;
}

.field-2 img {
    width: 93%;
}

.field-3 img {
    width: 100%;
}

.field-4 img {
    width: 91%;
}

.field-5 img {
    width: 79%;
}

Answer 1

这应该是你想要的：

#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%;
}

Answer 2

我把事情简化了一点。

FIDDLE

CSS

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

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

然后你只需要处理左边距，容器大小/位置，图像大小等。