Content going above Ionic-Header bar

I am using the Ionic-Header bar for my needs. I adjusted the styling of the bar as follows:

.bar.bar-positive {
  background: #00D7FF;
  border: none !important;
}

I have now an image in my content which can sometimes becomes very large and high, resulting that it overlaps my Ionic-Header bar. The styling of the image is as follows:

<img ng-src="{{imageDataViewer.currentCID}}" ng-show="currentCID" class="image-viewer">

.image-viewer {
  width: 100vw;
  max-width: initial;
  max-height: auto;
}

What is the way to deal with this? I am trying to fill the content with an image.

http://ionicframework.com/docs/api/directive/ionHeaderBar/