Alright, here’s the deal.
Your first image is an easy fix: all you need to do is set the width to 50% [A] and then align it to the left [B]. Since this is a symbol, you could lower the width even further (say to 40%) and adjust the alignment [C] in order to have it fit snugly into the left half of the viewport.
Your second image is more of a problem. See, the left half of the viewport is kind of square-sized (although it does vary, depending on screen or window width:height ratio), which means that photos which are a lot wider than tall or vice versa aren’t going to fit properly - unless you’re willing to put up with white spaces. It’s like trying to fit a rectangular picture into a square picture frame. You need to compromise, either by cropping some piece of the photo away or by leaving a lot of white space around.
By the way, parallax effects are a bit tricky on mobile devices, since at times they work (IX2) and at times they don’t (CSS). Moreover, the viewport gets dizzyingly tall, meaning that in your case you’d need to redesign how the whole thing works if you don’t want to get two 4:1 slices per section.