I can't make an image to fill a whole column div

Question

I inserted an image in a div class="col-md" but as you can see from the photo the image cannot fill the whole column div and leaves some edges not covered. how can I do?

HTML file:

<div class="container">
    <div class="row">
        <div class="col-md" style="border: 2px solid blue">
            <img id="imm" src="dog.jpg">
        </div>
        <div class="col-md">
            <h1 style="color:crimson">dog</h1>
        </div>
    </div>
</div>

CSS file:

#imm{
    width: 100%;
    height: auto;   
}

Answer 1

Bootstrap has utility class to remove padding if you want, add pl-md-0 and pr-md-0 to your col-md

pr-md-0 basically means: padding right on medium screens set it to 0. pl-xx-x means padding left.

 #imm{ width: 100%; height: auto; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md pl-md-0 pr-md-0" style="border: 2px solid blue"> <img id="imm" src="https://via.placeholder.com/200x100"> </div> <div class="col-md"> <h1 style="color:crimson">dog</h1> </div> </div> </div>

Documentation:

https://getbootstrap.com/docs/4.0/utilities/spacing/

Answer 2

By default, the col-md-* classes adds some padding horizontally. In Bootstrap v4, there's a class called no-gutters which you can add to the row element to remove the padding.

Here's the example:

<div class="container">
    <div class="row no-gutters">
        <div class="col-md" style="border: 2px solid blue">
            <img id="imm" src="https://picsum.photos/1000">
        </div>
        <div class="col-md">
            <h1 style="color:crimson">dog</h1>
        </div>
    </div>
</div>

Fiddle: https://jsfiddle.net/6n13zucg/

Answer 3

use this syntax in image class

.image{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  object-fit: cover; 
}

or object-fit:fill;