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/