推特引导-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 */
}

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

另请参阅视口单元兼容性