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

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, чего я не делаю хочу обрезать.

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

Есть какие-нибудь намеки на то, что я делаю неправильно?

Спасибо!

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 и добавил к изображению отрицательный верхний край, если он выше, например, 80px Вот скрипка с результатом: http://jsfiddle.net/uu96D/1/

И код, использующий jQuery:

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