具有相同高度的 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

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