Thank you so much for getting back to me, @QA_Brandon, and I’m ecstatic it was able to be reproduced.
Oh, yes: for two months, there’s hair everywhere. I expect we’ll both have similar amounts left in a few more months, heh.
re the explanation: Wow, all right. That solves this months-long mystery. Thank you, thank you, thank you for finally getting to the bottom of this. Your QA & Designer geniuses are definitely earning their title.
So, in conclusion, the Webflow in-page preview is a partially-built-iframe. Now, images need to have a defined height/width (not just max-height/max-width). So when first building out the iframe, Webflow tries to understand an image without a set height/width, but it can’t: it gives a bad/partial/incomplete guess. That preview-guess is fixed when the iframe is refreshed by 1) a save command or 2) selecting another div (i.e., creating the blue outline highlight). Once the iframe actually builds out its complete preview, it finally reveals what the live website looks like, i.e. a shrunken image).
I’m thankful this issue was as minor as that, as I was afraid I’d need to start over understanding how images, CSS, and Webflow worked. But, noting the image set height/width, it’s probably needed.
Thank you so much for the workaround. I went and read up a little more on object-fit and I’ve done it like this, on the image, on the desktop & it gracefully cascades on its own to smaller viewports:
height: 100%
width: 100%
object-fit: cover
With this combo, the image doesn’t need different widths/heights on every viewport + won’t be distorted + will always cover any screen size no matter how weird its ratio + maintains image responsiveness (downsizing image resolution on smaller viewports) + the image doesn’t jump as the user shrinks the viewport (e.g., on a desktop) + you can control the “focus point” w/ wonderful recent addition of object-position, too, by Webflow.
See the short clip here, for what the final result looks like:
https://streamable.com/x8wni
Thank you very kindly, @QA_Brandon for getting to the bottom of a bug that I was afraid was forever stuck in the nobody-knows-and-nobody-can-fix-it abyss. Much appreciate your suggestion, @Wadood_Hussaini, too: you were on the right track about the image width/height, which would’ve corrected the behavior; but, now knowing how Webflow’s in-page preview operates, this should hopefully stave off more confusion and hair-pulling.
