CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
hcgriggs
hcgriggs

Reputation: 190

Image still has margins when trying to fill a div

I would like an image to completely fill a div in my bootstrap grid layout. However, when I try the following it still leaves visible margins on the sides and at the bottom of the image. Here is my code:

<div class="container"
<div class="row equalheight">
        <div class="col-md-8 index-featured-image div-fill">
           <!--featured image -->
            <img src="http://placehold.it/400x200">
        </div>
        <div class="col-md-4 index-featured-about">
            <h2>this is about the featured post.</h2>
            <p>This is the content</p>
        </div>
    </div>
</div>

And the CSS: 

.container {
width: 100%;
height: auto;
}

.col-md-4 {
height: 100%;
background-color: green;
border-top:solid white 20px;
border-bottom:solid white 20px;
overflow: hidden;
}

.col-md-8 {
height: 100%;
background-color: black;
border-right: solid white 20px;
border-top:solid white 20px;
border-bottom:solid white 20px;
}

.col-md-8 img {
width: 100%; 
height: 100%;
}

Here's what it looks like.

I appreciate any help! I've been trying to figure this out for hours!

Upvotes: 0

Views: 136

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Just add padding: 0; to the div containing the img like this .div-fill{padding: 0;}

see fiddle: https://jsfiddle.net/16q2xr8k/18/

Upvotes: 3

Related Questions