使用背景图像显示BooStrap中的图像

我刚刚使用Twitter的BootStrap完成了构建我的网站的一部分，但正在寻找改进方法。此模块的图像为已知宽度但未知高度（图像高度会有所不同，但具有固定宽度）并且图像顶部有文字。我最初是通过在一个div内部有一个图像标签来构建的，然后使用position:absolute; top:0;将图层上面的文本移动。使用背景图像显示BooStrap中的图像

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

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

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

我的代码：

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

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

只要是明确的，这里是我试图创建一个图像： enter image description here

来源

2012-10-05 Jon

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

你现在习惯了这个

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

Live demo

来源

2012-10-05 04:50:14

我的形象的高度将发生变化。它不会总是200px。在我使用BootStrap时，我不认为设置固定宽度是明智的，因为在调整大小时会产生缩放问题。 – Jon

@Jon现在您可以定义最小宽度或最小高度 –

如何在不知道图像高度的情况下定义最小高度？我的图片范围从100px到750px。宽度将全部为300px或span4。 – Jon

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

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

试试这个演示：jsfiddle

来源

2012-10-05 07:21:41 Selvamani

我的图片高度将一直在变化，因此我无法在我的div上设置较高的高度。我认为这种方法是不可能的，因为div需要高度/宽度，我无法在纯粹的CSS解决方案中提供高度。 – Jon

使用背景图像显示BooStrap中的图像

回答

相关问题