Image stretching and then un-stretching when clicking out of viewport

I ran into this bug while making a little website. As seen in the clip below, when changing properties of an image, the image gets stretched in weird ways and remains stretched until I click out of the viewport onto another app. Sometimes it also fixes itself after some time.

https://streamable.com/cflgu


Here is my site Read-Only: LINK

Hey @peej,

Your read only link doesn’t work :frowning: can’t take a look to check what’s the problem…

My bad!

Fixed it, and should work fine now

Hi again peej,

You gave the image only width, and the parent has flex with align:stretch so… the image is being stretched :smiley:

1 Like

I’m still a bit confused though, as you can see in the video all I do to fix this is click out of Chrome!
The image looks fine and in the right proportions on both my desktop and mobile device :thinking:

It seems strange (and buggy) that the images stretches, but then stops stretching when I click away!

I guess that’s because you have confused the browser… :stuck_out_tongue_closed_eyes:
It wants to display the image in it’s original ratio, since you did not give it a height, but also the parent wants to distort the proportion because of it’s flex properties…

Ahh ok, so is it stretched when you view my website?

Looks like you need to change that flex parent to center alignment. See attached.

1 Like

beautiful, thank you!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.