It sounds like you are describing the Splash Page.

The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window) and may may too small to be usable.
The Splash Page is essentially an image link for the gallery which displays an image (by default, the first image in the gallery) and some text.
When the user clicks or taps the Splash Page, the gallery is expanded to fill the browser window (giving the images more space to be displayed).
When the gallery is expanded in Small Screen Mode, the user is presented with a page of thumbnails from which a main image can be selected. When a thumbnail is clicked, the thumbnail page is replaced with the chosen image. (In Small Screen Mode, the thumbnails and main images are displayed on different pages to maximize the area available for the images on small screen devices.) The user can return to the thumbnail page via the Thumbnail Button on the gallery's Button Bar.
More information about the Splash Page can be found in the Screen Modes section of the Gallery Tour.

By default, the Splash Page uses the first image in the gallery and scales the image to fill (rather than fit within) the Splash Page (which uses the gallery dimensions). If the image does not have the same aspect ratio as the gallery/Splash Page, then cropping will occur.
There is no way to change the scaling behavior for the Splash Page image but you can choose an image to be used for the Splash Page via the splashImageUrl configuration option.
The splashImageUrl can be an absolute path or a relative path (relative to the web page containing the gallery's embedding code).
The splashImageUrl does not need to be a gallery image so you could perhaps prepare an image that represents your gallery and looks better at the gallery/Splash Page dimensions.

You can choose to not use the Splash Page by setting showSplashPage="NEVER" ('Customize -> Splash Page' section). Using this setting, the thumbnail page would initially be displayed instead of the Splash Page on small screen devices.
Alternatively, you could force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').

For reference, all the Splash Page configuration options can be found here.

I think the error 404 (file not found) when expanding your gallery from the Splash Page is due to your gallery's embedding code being enclosed within the gallery container. (i.e. you have the opening <div> tag before the embedding code and the closing </div> tag after it).
Take the embedding code outside the gallery container and this should solve your problem.

Incidentally, I notice that your web page contains several HTML errors.
You can check your page for HTML errors with the W3C Markup Validation Service and then fix the errors reported.
Once the code on your web page validates correctly, your web page should be rendered with greater consistency and predictability across different browsers.

I hope this helps.