Menu
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
705
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:
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
