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

Question

所以，我没有写这个，但现在我正在努力修复它......

我有一个固定宽度的div，它上面有5个图像。这些图像大小相同，但我们希望根据css类进行缩放。这是在drupal中完成的，因此实际缩放图像会很棘手，目前的解决方案是在CSS中缩放它们。问题是，当这样做时，每个图像之间的间距不相等。

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

我正在谈论的图形视图：

所以这里的目标是拥有相同的输出，但每个图像之间的距离相等。我已经尝试了很多东西而且运气不好......我已经找到了用文本或固定宽度图像来做这个的方法，但似乎没有什么可以解决这个问题。我也尝试在.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>

目前的例子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;
}

然后你只需要使用左边距，容器尺寸/位置，图像尺寸等。