Indeed, it is possible for the content to be responsive.
If you are looking to eliminate spaces between images, utilizing Bootstrap 3 can simplify the process. In Bootstrap 3, padding is now preferred over margins to create the "gutter" in your CSS.
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
To achieve this, simply add 'no-gutter' to any rows where spacing should be removed, as shown below:
<div class="container">
<div class="row no-gutter">
<div class="col-lg-6">
<img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
</div>
<div class="col-lg-6">
<img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
</div>
</div>
</div>
If you want all images to have equal height, you can use the following CSS:
img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
For images to maintain a height of 100% regardless of width (to avoid stretching), you can apply the following CSS:
img {
position: relative;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
I apologize for using '.img' instead of 'img' previously.
You can also utilize the 'pull-left' class as shown below:
<div class="col-lg-6 pull-left">
<img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" alt="Responsive image">
</div>
Alternatively, you can set a specific height for the images like so:
img {
float: left;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
}
Check out the DEMO here