當調整大小時，縮略圖圖像不適合整個列

Question

我在一列中包含sidebar，在row中包含另一3列中的3 thumbnails。 thumbnail圖片最初適合整個columns，但是當我調整thumbnail images的大小時，請將column保持爲全寬（與通常的bootstrap響應式作品一樣）。我需要伸展我的images因爲它們填充在column的

這裏是我的HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid side-navigation-bar"> 
 
    <div class="row"> 
 
     <!--==========================================--> 
 
     <!--Side navigation bar--> 
 
     <!--==========================================--> 
 
     <div class="col-md-3 col-md-3-thumbnail"> 
 
      <div class="nav-side-menu" > 
 
       <div class="brand"><i class="fa fa-heartbeat"> myVitals.com</i></div> 
 
       <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> 
 

 
       <div class="menu-list" > 
 

 
        <ul id="menu-content" class="menu-content collapse out" > 
 
         <li> 
 
          <a href="#"> 
 
           <i class="fa fa-home fa-lg fa-fw"></i>&nbsp; Home 
 
          </a> 
 
         </li> 
 

 
         <li> 
 
          <a href="#"> 
 
           <i class="fa fa-book fa-lg fa-fw"></i>&nbsp; My Appointments 
 
          </a> 
 
         </li> 
 

 
         <li> 
 
          <a href="#"> 
 
           <i class="fa fa-s15 fa-lg fa-fw"></i>&nbsp; Facilities 
 
          </a> 
 
         </li> 
 

 
         <li> 
 
          <a href="#"><i class="fa fa-cogs fa-lg fa-fw"></i>&nbsp; Services</a> 
 
         </li> 
 

 
         <li> 
 
          <a href="#"><i class="fa fa-stethoscope fa-lg fa-fw"></i>&nbsp; Doctors</a> 
 
         </li> 
 

 
         <li> 
 
          <a href="#"> 
 
           <i class="fa fa-medkit fa-lg fa-fw"></i>&nbsp; Medications 
 
          </a> 
 
         </li> 
 
         <li> 
 
          <a href="#"> 
 
           <i class="fa fa-medkit fa-lg fa-fw"></i>&nbsp; Medications 
 
          </a> 
 
         </li> 
 

 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <!--==========================================--> 
 
     <!--End of Side navigation bar--> 
 
     <!--==========================================--> 
 

 

 
     <!--==========================================--> 
 
     <!--Cards--> 
 
     <!--==========================================--> 
 
     <div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center"> 
 
      <div class="thumbnail"> 
 
       <figure class="imghvr-hinge-down"> 
 
        <img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization"> 
 
       </figure> 
 
       <div class="caption"> 
 
        <h5><b>Bootstrap Cards Design</b></h5>        
 
        <p class="card-description">Hi there How are you?</p> 
 
        <p><a href="#" id="thumbnail-btn" class="success-color btn btn-primary" role="button">Read More</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center"> 
 
      <div class="thumbnail"> 
 
       <figure class="imghvr-hinge-down"> 
 
        <img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization"> 
 
       </figure> 
 
       <div class="caption"> 
 
        <h5><b>Bootstrap Cards Design</b></h5>        
 
        <p class="card-description">Hi there How are you?</p> 
 
        <p><a href="#" id="thumbnail-btn" class="success-color btn btn-primary" role="button">Read More</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center"> 
 
      <div class="thumbnail"> 
 
       <figure class="imghvr-hinge-down"> 
 
        <img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization"> 
 
       </figure>       
 
       <div class="caption"> 
 
        <h5><b>Bootstrap Cards Design</b></h5>        
 
        <p class="card-description">Hi there How are you?</p> 
 
        <p><a href="#" id="thumbnail-btn" class="btn btn-primary" role="button">Read More</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

我甚至嘗試了width:100%的縮略圖 as

.thumbnail > img{width:100%; display:block;} 

的問題是，該img沒有采取全寬度，其column

誰能請幫助我的???

Answer 1

您可以只設置寬度100%，高度爲auto，這將其擴大到全寬。

CSS：

.thumbnail > figure > img { 
    width: 100%; 
    height: auto; 
} 

JSFiddle Demo

Answer 2

用於.img-fluid在Bootstrap.4響應圖像。它具有以下的CSS：

.img-fluid { 
    max-width: 100%; 
    height: auto; 
} 

https://getbootstrap.com/docs/4.0/content/images/