CSS多張影像相同高度

好，對我的一個新的網站，我想爲特色的圖象的區域像"twentyfourteen wordpress theme"。所以，我的一個元素的基本結構是：CSS多張影像相同高度

<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

來源

2014-02-19 tom.

你會放入的jsfiddle所有代碼？ – steinmas

所有圖像是否具有相同的高度？ – Huangism

我猜他們不這樣做。試着改變你的'.featured拋開數字img'了'height'爲固定的像素高度。 – steinmas

變化從100％的.featured aside figure img的CSS height爲固定的像素高度。

來源

2014-02-19 21:26:00 steinmas

但是，如果你決定的JavaScript ...

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

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

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

來源

2014-02-19 22:20:21

CSS多張影像相同高度

回答

相關問題