The images are inside of the following container, which we have set to a heigh of 500px and 20vw, or 20% of the screen width:
These images are being used as a background image, so the image is going to do whatever is needs to do in order to cover that div block I mentioned above, making sure it takes up the entire container. That’s because we have the background image set to cover:
So, when you preview your site, the container gets wider because your screen got wider, since we have it set at 20vw, but the height stays the same at 500px. So the container becomes more square. Now the background image has to change how big it is to cover the new, differently shaped container. That’s why the image appears differently than in the designer mode, when your screen is smaller.
There are a few solutions to this, but just to make sure I know what you want - you want the image to stay the exact same ratio as what the image really is, is that correct? If so, I do have a solution for you. Just let me know if this is what you want.