Hello Everybody!
I’m going crazy with a very simple thing:
I need to create a Header which contains a Logo image, that uses 100% of the header (minus paddings) and scales proportionally horizontally to keep the logo fully visible and proportional (even if the size of the header changes).
I’ve tried all kinds of combinations between Grid, Flex, 100%, Adapt to container… and nothing… I can’t get this.
Can anybody explain the structure I should create for this?
This is my current structure:
MAIN FRAME: Grid, header 100px; Body: AUTO, Footer: 80px
→ Header Board: Grid Element: Static: Width 100%, Height 100%
->-> Logo Container: Flex Element: Fit content (Horizontal and Vertical) / Size Ratio Fixed
->->-> Image: Grd Cell Element: Fixed Width 55px, Fixed Length 64px
I need that, whatever size I give to the Header cell in the main frame, my Logo image looks proportionate and uses the full height (minus paddings)
Currently Behaviour:
I need the logo to remain always proportional, max height excluding paddings of the header.
Please suggest the best structure to do this with all the settings (grid, flex, etc)
Thanks everybody in advance!
Is the logo a bitmap image? You should be able to get more control over responsively scaling the logo if you’re able to import it as an SVG (paths).
Hello Laura! Thanks for your advice. I tried to change to SVG and the problem is the same. Attached you can see 2 screenshots of the problem.
The logo on the right is how I would expect it to look (That one I entered the size manually).
As you can see on the first screenshot the “Lock” for Height/Width proportions is activated and the Flex Element dimensions are static.
On the second screenshot you see what happens when I set the Flex Element height to 100%… the logo gets stretched vertically and the proportions don’t get respected.
It seems like a bug to me, unless I’m missing something…
Let me know if you have any ideas, thank you again! 
Not a bug. I can see you’ve got the width set to fixed, which means it will always stay at the 62 pixels specified at the top of the panel.
BUT I’m not sure I have a workaround here, you’ve hit something that I’ve had issues with too.
I hadn’t even considered that you would expect objects with a locked height + width to preserve that ratio when resized as part of a flex layout… that would be really cool. I found that a user story already exists for this in Penpot. Since CSS has a (relatively new) aspect-ratio feature to do this, it could work well for Penpot too.
Interesting ideas here 
@diego Maybe as a quick fix (and avoiding further headaches) just enter the new height value (after resizing the header) for the logo width manually. Not a super conveninent way but something.
Thank you! Yes, this is what I’m doing right now, but if I modify the height of the header I have to modify all the internal components manually. That’s exactly what I wanted to avoid hehe.
Both where set to fixed initially… then I set the height to 100%. Having the aspect ratio locked, I expected it to adapt the width somehow. Worst case: the lock should at least turn itself off, otherwise it’s not consistent (this is why I consider it a bug).
If I set the width to 100% then it gets even more deformed in horizontal dimension as it takes all the space available.
So the main idea is: Having aspect ratio locked, if I give priority to Height 100%, the other dimension adapts to keep proportions. I hope it helps for future development!
I guess I’ll have to wait for a future fix hehe. Thanks again!
