How to create picture header that doesn't resize

Question

How to I stop a header image resizing when I preview it? It looks perfect while still editing the experience and then squashes down when previewing. 
Most of the experiences in the Gallery only use text here, I wonder if this is why? 
This happens both when I use an actual header widget or a fixed panel with the content embedded:

This is what the top of my Experience looks like after - the top and bottom are cut off:

ThomasCoughlin · Accepted Answer

Hi @Nicauldron, here's what I would try if you haven't already:

1. Make sure the Image is set to Fit and not Fill, which will ensure the entire image appears and is not cropped. You might have to alter the height of the header and/or the dimensions of the widget to fit your particular image (see the next step).

2. Set the Image widget's height to 100% of the header's height, and the widget's width to Auto.