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的{{1}}，因为它本身不会自动扩展以最适合图像

另见viewport units compatibility

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

1 个答案: