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放大图片占用整列

回答

相关问题