似乎無法找出這一個。將背景圖像應用於Bootstrap列,但給0高度?
我想有這應該在一個div的右手部分應用背景圖像,並使用自舉列會做到這一點的最好方式響應思想。但是,圖像沒有顯示,因爲列div的高度始終爲1像素,無論CSS如何。
這是爲什麼,我該如何將其設置爲在其他分區的整個高度?
HTML
<div id="procedure-singleReview" class="well">
<div class="row">
<div class="col-md-8">
<h2 class="bv-brand">Here's what a happy client says...</h2>
<blockquote>
<?php echo $sidebarReviews[0]->post_excerpt;?>
<footer><?php echo get_post_meta($sidebarReviews[0]->ID,'client_name',true);?> <span class="rating rating-<?php echo get_post_meta($sidebarReviews[0]->ID, 'rating', true);?>"></span></footer>
</blockquote>
<a href="<?php echo get_the_permalink($sidebarReviews[0]->ID);?>" class="btn btn-primary">Read full review</a> <a href="/testimonial-reviews/" class="btn btn-default">Read all reviews</a>
</div>
<div class="col-md-4 hidden-sm img"></div>
</div>
</div>
CSS
#procedure-singleReview .img {
height:100%;
background-image:url(http://placehold.it/800x600);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
你會嘗試'background-size:100%;'? –
儘管我已經嘗試過了,但它並未改變高度,隻影響容器內背景圖像的顯示(在此情況下爲1像素高)。無論如何,我不希望將背景大小設置爲100%,因爲我希望它特別使用「封面」來填充div的空間。 – Lee
'身高:100%'不起作用。如果你想以這種方式使用它,你需要在父元素上設置一個高度(比如100px)。看到這個小提琴:https://jsfiddle.net/1max0ry9/ – user3528269