使用背景图像在BootStrap中显示图像

Question

我刚刚使用Twitter的BootStrap构建了我网站的一部分，但我正在寻找改进它的方法。此模块的图像已知宽度但未知高度（图像高度会有所不同，但具有固定的宽度），并且图像顶部有文本。我最初通过在div中包含图像标记来构建它，然后使用position:absolute; top:0;将图层移动到其上方。

我不喜欢使用position:absolute;的想法。我的替代解决方案是将图像视为包含文本的div的背景。但是，通过这样做，我遇到了两个问题：

1. 我不知道如何指定div的高度，因为这是一个 变量基于图像的高度。宽度总是如此 of span4（300px）。每张图片最多只会有几个字 因此不足以占据整个垂直空间 DIV。
2. 随着浏览器宽度缩小，背景div的一部分得到 裁掉了。这是因为BootStrap正在尝试调整 响应。我该如何解决这个问题？

我完全难过，我觉得如果不能确定一定的高度，这种替代解决方案是不可能的。还有更好的选择吗？

我的代码：

<div class="span4 cell">
    This is a placeholder image
</div>

.cell { background: url(http://www.placehold.it/300x200) no-repeat; }

为了清楚起见，这是我想要创建的图像：

Answer 1

的 Demo ............................ ....

HI现在习惯了这个

.span4.cell { 
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
 }

的 Live demo 的

Answer 2

试试这个css代码。它将高度设置为auto。 如果你不想要边框，请删除。

.cell {
background:url("http://i.stack.imgur.com/klttw.jpg") no-repeat;
width:300px;
height:200px;
border: 1px solid red;
}

试试此演示：jsfiddle