Question

I have an image container based on Jquery Mobile listview element structure.

Looks like this:

<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>

I’m overriding JQM-CSS to create an image gallery-list. Images and h3 are both contained inside a link element. As the images can have different heights, I want to set a CSS fixed-height/overflow:hidden to the link element to cut off images at the top using vertical align: top.

Here is my CSS so far:

 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;
    }

It doesn’t work… If I check on Firebug, the element-height is set to 100px, but it covers the image top versus covering the image bottom and h3, which I do not want to crop away.

I have tried setting line-height to 100px as well, but this does not work at all.

Any hints on what I’m doing wrong?

Thanks!

EDIT:
Can’t use clip either, because I don’t know at what height I want to start (img.height-100px) and I cannot clip from the bottom. Or can I?

SOLUTION:
It would work like this:

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

Doesn’t use vertical-align but the result is ok.

Answer 1

I’m afraid that can’t work. Adding display:block; to your link and would be a start for your method, but check the result: http://jsfiddle.net/uu96D/

vertical-align: bottom; won’t push the a tag to the bottom of the container. Here is a guide of how vertical-align works: http://phrogz.net/css/vertical-align/index.html

To solve your problem i’d go to some js solution, and add a negative top margin to the image if its taller than, for example, 80px. Here’s a fiddle with the result: http://jsfiddle.net/uu96D/1/

And the code using jQuery:

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