1

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

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

  1. 我不知道如何指定 div 的高度，因为这是基于图像高度的变量。宽度将始终为 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; }

为了清楚起见，这是我要创建的图像： 在此处输入图像描述

4

2 回答 2

0

Demo................................

HI now used to this 

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

Live demo

于 2012-10-05T04:50:14.887 回答
0

试试这个 CSS 代码。它将高度设置为自动。如果您不想要边框，请删除。

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

试试这个演示：jsfiddle

于 2012-10-05T07:21:41.217 回答