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

Я предполагаю, что они этого не делают. Попытайтесь изменить 'height' в вашей' .featured в сторону фигуры img' до фиксированной высоты пикселей. – steinmas

изменить height в вашем .featured aside figure img CSS от 100% до фиксированной высоты пикселя.

источник

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 Несколько изображений с одинаковой высотой

ответ

Смежные вопросы