CSS - 如何使用 CSS 高度、垂直对齐和溢出来隐藏容器的顶部？

Question

我有一个基于 Jquery Mobile listview 元素结构的图像容器。

看起来像这样：

<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，我这样做不想剪掉。

我也尝试将 line-height 设置为 100px，但这根本不起作用。

关于我做错了什么的任何提示？

谢谢！

编辑：
也不能使用剪辑，因为我不知道我想从什么高度开始（img.height-100px）并且我不能从底部剪辑。或者我可以吗？

解决方案：
它会像这样工作：

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

不使用vertical-align，但结果还可以。

Answer 1

恐怕这行不通。将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)});
    }
});