Bootstrap enlarge picture to take up entire column

问题

I'm using bootstrap and I have a row with 1 column and another row with 2 columns. All items have one picture in it, and should take up all the avaible space inside the column. So far I can't get the first image on the first row to fill the div width,this image resizes correctly when I reduce the window, but when I enlarge it, the picture will resize to its original maximum size when I want it to be always same as the div width

Here is the snippet : https://jsfiddle.net/gd0obgg9/

Here is the code :

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

I want my 550x200 to fill enterely the width Any advice ? thanks

回答1:

If I understood you correctly, to give the image full width use:

.img-responsive {
    width: 100%;
}

Note that this will, in some cases, distort the image to cover the full div

In my test:

回答2:

Update your css to set the width of img elements inside your columns to 100%.

回答3:

you should add width:100% to your img

here the new code

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

来源：https://stackoverflow.com/questions/37170049/bootstrap-enlarge-picture-to-take-up-entire-column

标签

html

css

twitter-bootstrap