背景画像をブートストラップカラムに適用しますが、高さは0ですか？

Question

これを理解できないようです。

divの右側の部分に適用する必要がある背景イメージが必要です。これを行うには、Bootstrapカラムを使用すると効果的です。しかし、CSSに関係なく、列divの高さは常に1ピクセルであるため、イメージは表示されません。

これはなぜですか、それを他のdivの完全な高さに設定するにはどうすればよいですか？

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; 
} 

Answer 1

この

#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>

をお試しください3210

Answer 2

あなたのdivにmin-heightを与えることができます。あなたは `background-size：100％;`を試してみませんか？ここでは、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; 
}