我定义了以下标题元素:
<div class="header">
<div class="row">
<div class="col-md-8 col-xs-12">
<h3 class="heading">Heading info here</h3>
<p>...</p>
</div>
<div class="col-md-4 hidden-xs header-image"></div>
</div>
</div>
采用这种风格:
.header-image {
background-image: url("../img/email.jpg");
}
但是图像并没有占据整个 div,事实上,当我在 Chrome Inspector 中查看它时,它的高度为 1px,宽度为 380px
如何让它占据 div 的整个宽度和高度,而没有内边距或边距?
最佳答案
一个选项是使用 background-size
属性(但是,请记住,低于 9 的 IE 版本不支持此功能):
background-size: 100% 100%;
这将填充 div
的宽度和高度,但仅当 div
也有自己的宽度和高度时才可见:
.header-image {
width: /* your width */;
height: /* your height */;
}
关于html - 如何让图片占据整个div的高度和宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22135406/