html - 尝试填充 div 时图像仍然有边距

Question

我想要一个图像来完全填充我的 bootstrap 网格布局中的一个 div。但是，当我尝试以下操作时，它仍然会在图像的侧面和底部留下可见的边距。这是我的代码:

<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>

还有 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.

感谢您的帮助!几个小时以来，我一直在努力解决这个问题!

Answer 1

只需将 padding: 0; 添加到包含 img 的 div 中，就像这样 .div-fill{padding: 0;}

参见 fiddle :https://jsfiddle.net/16q2xr8k/18/