How to remove the extra space around the image inside a div - css

Question

I have images inside bootstrap card div which are inside col div
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row">
<div class="col-md-6 col-lg-6 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>
I would like to have image on all col div space.
How could I achieve that ?
How could I extend image in order to fill the gap that I represent by a black line

Answer 1

As you describe you just want to consume all the space inside the col div (Left and Right blank space).
What you have to do is to reduce the default padding of bootstrap columns of padding-left: 15px; padding-right: 15px to 0px. And it will work for you.
Sometimes your styles get overloaded by the bootstrap styles. So in that case you have to use the keyword !important with your CSS property to overload all other CSS styles define for that particular property.
.zero-padding {
padding: 0px !important;
}
And to force the image to use all the space inside the col div you have to use the following CSS.
.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
In order to force the images on the right side to take the 50% of height to the above 2 images and 50% of height to the image below; you should use the following CSS.
.half-height{
height: 50%;
}
OUTPUT:
Working Snippet below:
.zero-padding {
padding: 0px !important;
}
.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.half-height{
height: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row zero-padding">
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12 zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>

Answer 2

In the past, I've used a little javascript to achieve this. Making the image hidden but using it as a full background.
$(function() {
$('.full-image').each(function() {
var img = $(this).find('img');
$(this).css('background-image', 'url(' + img.attr('src') + ')');
img.css('visibility', 'hidden');
});
});
.full-image-wrapper {
position: relative;
border-radius: 3px;
overflow: hidden;
min-height: 120px !important;
}
.full-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row">
<div class="col-md-6 col-lg-6 B full-image-wrapper">
<div class="full-image">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B full-image-wrapper">
<div class="full-image">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12 full-image-wrapper">
<div class="full-image">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>
This will still work without JavaScript. You might need to do a bit more work to make mobile/tablet views optimal. I've had to force min-height to override bootstrap behaviour.