CSS — как скрыть верхнюю часть контейнера с помощью CSS-высоты, вертикального выравнивания и переполнения?

У меня есть контейнер изображений, основанный на структуре элементов списка 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, для высоты элемента установлено значение 100 пикселей, но оно покрывает верхнюю часть изображения, а не нижнюю часть изображения и h3, чего я не хочу. обрезать.

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

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

Спасибо!

РЕДАКТИРОВАТЬ:
Я также не могу использовать обрезку, потому что я не знаю, на какой высоте я хочу начать (img.height-100px), и я не могу обрезать снизу. Или я могу?

РЕШЕНИЕ.
Это будет работать следующим образом:

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

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


vertical-alignment css overflow jquery-mobile
person frequent    schedule 14.12.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

vertical-align: bottom; не будет помещать тег a в нижнюю часть контейнера. Вот руководство о том, как работает вертикальное выравнивание: 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)});
    }
});
person scumah    schedule 14.12.2011
comment
да, я боюсь, что jquery - единственный способ... Я тоже все еще пытаюсь использовать jsfiddle. Я проверю, если не найду решение. СПАСИБО пока! - person frequent; 14.12.2011
comment
Получил это, используя pos:rel/pos:abs вместо вертикального выравнивания. См. выше - person frequent; 14.12.2011
comment
На самом деле это гораздо лучшее решение: PI сначала пытался использовать относительное абсолютное позиционирование, но я не понимал, что нужно позиционировать a внизу (я умный), поэтому это не сработало... Вы могли бы добавить его в качестве ответа и примите его, если хотите :) - person scumah; 14.12.2011