Question

我想要一个图像来完全填充我的引导网格布局中的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;}

请参阅小提琴：https://jsfiddle.net/16q2xr8k/18/

在尝试填充div时，图像仍然有边距

1 个答案: