"Preview Site in Browser" is cutting off an image

[gibsynm70504193]

Hello everyone, I hope this question is not redundant or annoying, but I am having an issue that I cannot find an answer to. I have searched the forums as well as the web and cannot find a solution to my problem.

The first screenshot of my work space is what I would like the web page to look like, however when I "Preview Site in Browser" the bottom image is blown up and gets chopped off at the bottom. As seen in my second screenshot. Again I am sorry for the amateur question, any help would be great!

***************

[fotoroeder]

It seems to be a question of screen resolution / browser width.

Your design looks as intended at 960 px width. Your browser seems to be at least at 1400 or even taller.

Although you set the double arrow inside, you set the image to stretch to browser width, I guess.

So the image shows a different aspect ratio than the original image and because of this it scales as seen in your screenshots.

Solution: Set your image to resize to none. If you don`t like this, set it to resize in width and height.

Best Regards,

Uwe

[Günter Heißenbüttel · Accepted solution]

Your image is not placed as an image, but as a „fill“ into a rectangle, which only scales responsively in width. The fill image is set to „scale to fill“, what means, that the image always has to fill the complete container without any blank space. If the container hasn‘t the same aspect ratio as the image within, the image necessarily has to be cropped. Otherwise there would be blank space in either horizontal or vertical dimension — what is forbidden by choosing the „scale to fit“ option.

To fix this „clipping“ issue, you should place your image (not fill a rectangle). In this case, the image won‘t be clipped, when the browser window is resized. The drawback is, that images can‘t be scaled browser-wide.

To achieve this, you have to set your whole page (not only some elements) to scale browser wide. This can be done by clicking onto the double arrow icons to the left/right of the breakpoint bar. Now placed images can scale to browser width too.