自适应Div中的垂直对齐文本

Question

I'm trying to create promotional boxes for our website which is using the Bootstrap framework.

I want a div with a background image to house vertically aligned content. I believe I've succeeded partially, the problem happens when the width of the div becomes larger than the amount I set for the background-image size to appear. Is there any work around for this?

For instance at a column width of 6 the div is 455px wide but during some breakpoints the div becomes wider than that but the text content still thinks it's 455px.

Here is my html:

<div class="col-md-6 col-sm-6">
    <div class="promo-box01">
        <div class="promo-text">
            <h3>CTA</h3>
            <p>Limited time sale $45.00</p>
            <a href="#" class="btn btn-primary">Shop Now</a>
        </div>    
</div>
</div>

And here is my css:

.promo-box01 {
background-image:url('../images/promo1.jpg');
background-size: cover;
width:100%;
height:150px;
background-repeat:none;
text-align: center;
border-radius:3px;
box-shadow: 0 0 4px #888;
}

.promo-box01 .promo-text {
font-family:'Roboto',arial,sans-serif;
color:#FFF;
vertical-align: middle;
width:450px;
height:150px;
line-height:1.5em;
display: table-cell;
}

.promo-text h3 {
font-family:'Anton',arial,sans-serif;
color:#FFF;
font-size:28px;
}

Answer 1

尝试将这些类添加到“ promo-box01”：
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;