The prevailing feature of these images, is how they react to momentum scrolling. As you pull down the page down (putting the page in a negative scroll position), the header image stretches to accommodate the additional space. The image maintains aspect ratio as the image stretches, creating a zoom effect.

I tested this using iphones. hope this works on other devices too! Becasue this is just a HTML/CSS and javascript.

Implementation

HTML

<div class="image"></div>
    <div class="scroller">
        <div class="content-area">
            <p>
                Lorem ipsum...
            </p>
        </div>
    </div>

 CSS

.image {
    background-image: url('../img/stretch.jpg');
    background-position: 50% 50%;
    background-size: cover;
    height: 200px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

.smooth-operator {
    transition-duration: 250ms;
    transition-property: height;
}

.content-area {
    background: #fff;
    padding: 6px 10px;
    position: relative;
    z-index: 99;
    margin-top: 150px;
}

Javascript

const imageHeight = 200;
let _scrollTop; 

$('.image').on('webkitTransitionEnd transitionend', function() {
            $(this)
                .removeClass('smooth-operator');
        });

    $(document).on('scroll', function() {
        const scrollTop = $(this).scrollTop();

        if (_scrollTop === scrollTop) {
            return;
        }

        _scrollTop = scrollTop;

        const $imageStretch = $('.image');

        if (scrollTop <= 0) {
            $imageStretch
                .height(imageHeight + Math.abs(scrollTop));

            if (scrollTop === 0) {
                $imageStretch
                    .css('transform', `translateY(0px)`);
            }
        } else if (scrollTop > 0 && scrollTop <= imageHeight) {
            $imageStretch
                .css('transform', `translateY(-${scrollTop / 4}px)`);
        } else {
            $imageStretch
                .css('transform', `translateY(0px)`);
        }
    }).on('touchend', function() {
        const scrollTop = $(this).scrollTop(),
            $imageStretch = $('.image');

        if (scrollTop < 0) {
            $imageStretch
                .addClass('smooth-operator');

            $imageStretch
                .height(imageHeight);
        } else if (scrollTop === 0 || scrollTop >= imageHeight) {
            $imageStretch
                .css('transform', `translateY(0px)`);
        }
    });

Result

You can download the cordova project file here.