将背景图像应用于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; 
}

来源

2016-08-19 Lee

你会尝试'background-size：100％;'？ –

尽管我已经尝试过了，但它并未改变高度，只影响容器内背景图像的显示（在此情况下为1像素高）。无论如何，我不希望将背景大小设置为100％，因为我希望它特别使用“封面”来填充div的空间。 – Lee

'身高：100％'不起作用。如果你想以这种方式使用它，你需要在父元素上设置一个高度（比如100px）。看到这个小提琴：https://jsfiddle.net/1max0ry9/ – user3528269

试试这个

#procedure-singleReview{display:flex;}

#procedure-singleReview .img { 
 
    height:100%; 
 
    background-image:url(http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg); 
 
    background-size:cover; 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
    
 
} 
 
#procedure-singleReview{display:flex;}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="procedure-singleReview" class="well"> 
 
    <div class="row"> 
 
     <div class="col-sm-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-sm-4 hidden-xs img">sfsfsfsdfsfsfs</div> 
 
    </div> 
 
</div>

来源

2016-08-19 10:59:58

我使用COL-SM级，因为它只需添加＃程序，singleReview {显示：柔性;}在你的样式表 –

为什么更改父div来'flex'，导致'行'div来缩短它的宽度？它不是100％更多的 – Lee

你可以给min-height你的div。这里是一个jsfiddle

#procedure-singleReview .img { 
    height:100%; 
    background-image:url(https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png); 
    background-size:cover; 
    background-repeat:no-repeat; 
    background-position:center; 
    background-size:100%; 
    min-height:500px; 
}

来源

2016-08-19 11:01:03

我真的不希望使用固定的高度，在左侧窗格中的内容会改变div容器 – Lee

的高度，那么我认为你刚才应该把你的背景是里面的图像DIV –

将背景图像应用于Bootstrap列，但给0高度？

回答

相关问题