具有相同高度的CSS多个图像

Question

好的，在我的新网站上，我希望为"twentyfourteen wordpress theme"中的特色图片设置一个区域。所以我的元素的基本结构是：

<aside><a href="#">
  <figure>
    <img src="http://espacio-creativo.sutomaji.net/assets/spotlight/quantumenergy/full.png"/>
  <figcaption>

  <div class="cats">Blender, Can</div>
    Blender Energy</figcaption>   
  </figure>
</a></aside>

我得到的是这样的：

但我希望有这样的东西：

我不知道如何解决这个......我的css代码的一部分：

.featured aside {
    display: inline-block;
    width: 25%;       
    font-size: 16px;
    text-align: left;

}

.featured aside figure img {
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    display: inline;

    overflow: hidden;
}

任何知道如何做到这一点的人，首选没有任何javascript？

jsfiddle

Answer 1

将height css中的.featured aside figure img从100％更改为固定像素高度。

Answer 2

但是，如果你决定使用JavaScript ......

var height_table = $('.featured aside a figure div img').height();

$('.featured').css({'height' : height_table + 90});

http://jsfiddle.net/nQu6V/2/