caps lock caps lock - 6 months ago 37
HTML Question

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

Answer

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