sonia maklouf sonia maklouf - 8 months ago 34
CSS Question

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

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.
enter image description here
How could I achieve that ?
enter image description here

How could I extend image in order to fill the gap that I represent by a black line

Answer Source

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:

enter image description here


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>