html - 背景图像 Div(Twitter Bootstrap)

Question

我正在尝试构建一个 span8 宽度和不同高度的模块。有一个图像将定义 div 的高度，以及位于图像顶部的文本。当 Bootstrap 调整 div 大小时，我无法弄清楚如何防止我的部分图像被裁剪。

此外，我无法确定如何放置文本框。我正在尝试使用两个文本框 - 一个位于 0% 垂直位置，第二个位于 50% 垂直位置。

<div class="row">
    <div class="span12 promo">
        <div class="content">
            <div class="row-fluid">
                <div class="topText span24">
                    Text positioned on the top half
                </div>
            </div>
            <div class="row-fluid">
                <div class="botText span24">
                    Text positioned on the bottom half
                </div>
            </div>
        </div>
    </div>
</div>

.promo { height: 100%; }
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }    
.promo .content .row-fluid { height: 50px; }

Answer 1

您是否尝试过设置 min-height 属性？这将设置一个最小高度，这样您的图像就不会被截断。

我会尝试将两个 div 设置为 height:50%;，这应该会给你正确的效果。