Question

我使用bootstrap，我有一行有1列，另一行有2列。所有项目中都有一张图片，并且应该占据列内的所有可用空间。到目前为止，我无法获得第一行的第一张图像来填充div宽度，当缩小窗口时，此图像会正确调整大小，但是当我放大窗口时，图片将会当我希望它始终与div宽度

相同时，调整其原始最大尺寸

以下是代码段：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能够充分填充宽度有什么建议？感谢

Answer 1

如果我理解正确，请使用全屏图像：

.img-responsive {
    width: 100%;
}

请注意，在某些情况下，这会扭曲图像以覆盖完整的div

在我的测试中：

Answer 2

更新您的css，将列中img个元素的宽度设置为100％。

Answer 3

您应该将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>

Bootstrap放大图片以占据整列

3 个答案: