Hi,
When I use display:flex in a div with an image inside (img), the preview distorts image size! Look! The div container has display: flex; justify-content: center; align-items: center;
css rules. Plus css filters don´t work too into Pinegrow
Stalking this for a while now and am not sure how to help. I think this has nothing (or at least not much) to do with Pinegrow, its a general problem of images in a flexbox parent DIV being stretched. So one question would be:
Is it cross-browser wide? If so - did you set the browser-vendor prefixing correctly?
Cheers
Thomas
Well, maybe the html engine of Pinegrow is outdated, because Edge and Chrome render the page correctly. I see only some issues with Firefox, that changes scale of images! So, I think that is a problem in internal Pinegrow HTML render.
Sorry for my english.
I would have to see your code. The image distortion only happens when you are not specifically telling the browser what the size is for the image, it should be static numbers for width and height.
If you are seeing distortion in other browsers then I think the problem is not Pinegrow and it is showing you that there is indeed a problem somewhere with your css and or html.
For dynamic page flows images should use break points and instead of just changing the dimensions to resize the image you should swap the images out with the correct sized image. This does mean creating multiple versions of your images.
Hi, I discovered that Pinegrow doesn´t understand the rule align-itens:center (related with flex container). this cause the distortion.
I’d really like to see flexbox incorporated into Pinegrow kind of the way that Bootstrap columns are.