Bootstrap放大圖片佔用整列

我使用引導程序，我有一列有1列，另一列有2列。所有項目都有一張照片，並應占用列內所有可用空間。到目前爲止，我無法獲得第一行中的第一個圖像以填充div寬度，此圖像在縮小窗口時正確調整大小，但當放大時，圖片將重新調整爲其原始最大大小，當我想要它總是相同的div寬度Bootstrap放大圖片佔用整列

下面是摘錄：https://jsfiddle.net/gd0obgg9/

下面是代碼：

<body> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12"> 
      <h1 class="page-header">Portfolio Item 
      </h1> 
     </div> 
     </div> 
     <div class="row"> 
     <div></div> 
     <div class="col-md-12"> 
      <img class="img-responsive" src="http://placehold.it/550x200" alt=""> 
     </div> 
     <div></div> 
     </div> 
     <div class="row"> 
     <hr> 
     <div class="col-sm-6 col-xs-12"> 
      <a href="#"> 
      <img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt=""> 
      </a> 
     </div> 
     <div class="col-sm-6 col-xs-12"> 
      <a href="#"> 
      <img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt=""> 
      </a> 
     </div> 
     </div> 
    </div> 
</body>

我希望我的550x200填補enterely寬度有什麼建議？感謝

來源

2016-05-11 caps lock

如果我理解正確的話，給圖像全寬用途：

.img-responsive { 
    width: 100%; 
}

注意，這將在某些情況下，扭曲的形象，以覆蓋整個div

在我的測試：

來源

2016-05-11 18:01:49 Tico

謝謝大家，和所有其它 –

添加其他類一樣的.max寬度{寬度：100％; }。您可能需要.img-responsive，因爲它適用於其他情況。 – tmg

很好的感覺，@tmg – Tico

更新您的css，將列中的img元素的寬度設置爲100％。

來源

2016-05-11 18:06:44

你應該添加width:100%到您的IMG

這裏的新代碼

<body> 
    <!-- Page Content --> 
    <div class="container"> 
     <!-- Portfolio Item Heading --> 
     <div class="row"> 
      <div class="col-lg-12 col-xs-12 col-md-12"> 
       <h1 class="page-header">Portfolio Item 
        <small>Item Subheading</small> 
       </h1> 
      </div> 
     </div> 
     <!-- /.row --> 

     <!-- Portfolio Item Row --> 
     <div class="row"> 
<div> 

</div> 

      <div class="col-md-12"> 
       <img class="img-responsive" style="width:100%" src="http://placehold.it/550x200" alt=""> 
      </div> 
      <div> 

</div> 


     </div> 
     <!-- /.row --> 

     <!-- Related Projects Row --> 
     <div class="row"> 

      <hr> 

      <div class="col-sm-6 col-xs-12"> 
       <a href="#"> 
        <img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt=""> 
       </a> 
      </div> 

      <div class="col-sm-6 col-xs-12"> 
       <a href="#"> 
        <img class="img-responsive portfolio-item" src="http://placehold.it/300x300" alt=""> 
       </a> 
      </div> 



     </div> 

    </div> 


</body>

來源

2016-05-11 18:22:56

Bootstrap放大圖片佔用整列

回答

相關問題