Bootstrap-页面标题中的图像

Question

我想将图像添加为页面页眉，但不能摆脱顶部空白。 见红色部分 目前这是html

<div class="page-header">
    <img src="./eroforrasok/logo3.jpg" class="img-fluid page-header" alt="Responsive image" >
</div>

和CSS代码

.page-header {
  padding-top:0px;
  margin: 0px 0 0px;
  vertical-align: top;
}

我也尝试过

fixed-top

消除了上边距，但是图像始终位于最上边， 我无法向下滚动图像... 有什么建议吗？

Answer 1

如果认为您误解了.page-header的目的：

  

h1的简单外壳，可以适当地间隔和分段   页面上的内容部分。它可以利用h1的默认小   元素以及大多数其他组件（带有其他样式）。

但是，如果您坚持不应该在<img>内使用.page-header标签。请改用background-image；固定高度并将background-size设置为cover可以达到“神奇”的效果。示例：

.page-header h1 {
  margin-top: 0px;
}
.page-header {
  height: 60px;
  margin-top: 0px;
  background-size: cover;
  background-image: url(some/parth/to/image);
}

<div class="page-header">
  <h1 class="text-primary">My awesome page header</h1>
</div>

演示-> http://jsfiddle.net/pxu4gb6c/