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

Question

我刚刚使用 Twitter 的 BootStrap 构建了我网站的一部分，但我正在寻找改进它的方法。此模块有一张已知宽度但未知高度的图像(图像高度会变化但宽度固定)并且图像顶部有文本。我最初是通过在 div 中放置一个图像标签，然后使用 position:absolute; 来构建它的。 top:0; 将层移动到其上方的文本。

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

1. 我不知道如何指定 div 的高度，因为这是一个 基于图像高度的变量。宽度总是 跨度 4(300 像素)。每张图片最多只有几个字 因此不足以占据整个垂直空间 分区
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