CSS - как скрыть верхнюю часть контейнера, используя высоту CSS, выравнивание по вертикали и переполнение?

Question

У меня есть контейнер изображений, основанный на структуре элементов списка элементов Jquery Mobile.

выглядит так:

<li> 
<div class="ui-btn-inner"> 
    <div class="ui-btn-text"> 
    <a> 
    <img src="img/products/l/demo2.jpg"> 
    <h3>product2</h3> 
    </a> 
    </div> 
</div> 
</li> 

Я перекрывая JQM-CSS для создания галереи изображений-лист. Изображения и h3 содержатся внутри элемента ссылки. Поскольку изображения могут иметь разную высоту, я хочу установить фиксированную высоту/переполнение CSS: скрытый элемент ссылки, чтобы обрезать изображения сверху с помощью вертикального выравнивания: сверху.

Вот мой CSS до сих пор:

li { 
    display: inline-block; 
    min-width: 200px; 
    max-width: 300px; 
    width: 24%;  
    } 
li img { 
    width: 100%; 
    position: static !important;  
    max-width: 185px; 
    max-height: inherit; 
    } 
// fix height and overflow hidden 
li a { 
    height: 100px; 
    overflow: hidden; 
    vertical-align: bottom; 
    } 

Это не работает ... Если я проверить на Firebug, то элемента высота установлена ​​на 100px, но он охватывает верхние изображения по сравнению покрывая нижнюю часть изображения и h3, которые я не хочу убирать.

Я попытался установить высоту линии до 100 пикселей, но это вообще не работает.

Любые намеки на то, что я делаю неправильно?

Спасибо!

EDIT:
Невозможно использовать клип либо, потому что я не знаю, на какую высоту я хочу начать (img.height-100px), и я не могу клип от дна. Или я могу?

РЕШЕНИЕ:
Это будет выглядеть так:

li a { 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    } 
li div.ui-btn-text { 
position: relative; 
height: 100px; 
overflow: hidden; 
} 

не используется вертикальное выравнивание, но результат в порядке.

Answer 1

Боюсь, что это не сработает. Добавляем display:block; в вашу ссылку и являемся стартовой для вашего метода, но проверьте результат: http://jsfiddle.net/uu96D/

vertical-align: bottom; не будет толкать бирку на дно контейнера. Вот руководство по работе с вертикальным выравниванием: http://phrogz.net/css/vertical-align/index.html

Чтобы решить вашу проблему, я перейду к некоторому js-решению и добавлю отрицательный верхний край изображения, если он выше, чем, например, 80 пикселей. Вот скрипка с результатом: http://jsfiddle.net/uu96D/1/

И код с помощью JQuery:

$('img').each(function(){ 
    var height = $(this).height(); 
    if (height > 80) { 
     $(this).css({marginTop: "-" + (height-80)}); 
    } 
});