html - Twitter Bootstrap - DIV 绝对位置到图像响应放大

Question

我有一个图像作为背景，上面有一个 div。我正在尝试找到使其响应并在图片变小时覆盖更多图片的方法。我在下面尝试过，但我认为即使是列类也没有做他们应该做的事情。

<div class="row">
        <div class="col-lg-12 col-md-12 col-xs-12"
            <div id="test-container">
                <img src="images/productsplash.jpg" alt="Home Page" class="img-responsive"/>
                <div class="row">
                    <div class="col-lg-4 col-md-9 col-xs-12" id="products-container">
                            <div class="op-container col-lg-12 col-md-12"><h1>OUR PRODUCTS</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</p>
                            </div> 
                            <div class="col-lg-6 col-md-6" id="button-good"><p>Good <br>Products</p></div>
                            <div class="col-lg-6 col-md-6" id="button-bad"><p>Bad <br>Products</p></div>
                    </div>      
                </div>  
        </div>
    </div>

#test-container {
position:relative;
display:inline;

}

#products-container {
position:absolute;
min-width:30%;
max-width:40%;
top:35%;
left:55%;
background-color: blue;  /* currently missing opacity css*/


}

我想到了使用媒体查询来覆盖#products 容器的CSS。无法让它工作。我基本上希望它以平板电脑范围大小覆盖一半的 div，然后完全覆盖图片。

关于如何解决的任何想法？

Answer 1

您可以将图像作为 background-image到一个 div，并设置 background-size至 cover或 contain .

div应该与覆盖层具有相同的类 div例如:col-lg-4 col-md-9 col-xs-12

有点像

HTML

<div class="col-lg-4 col-md-9 col-xs-12 responsive-image" 
     style="background-image: url(/dynamic/image/url.png)">
</div>

CSS

.responsive-image {
    background-size: cover;  /* or contain */
    background-position: center center;
    height: 300px; /* or 25vh - 25% of viewport height */
}

唯一的缺点是你必须控制 height图片的div ，因为它本身不会自动扩展以最适合图像

另见 viewport units compatibility