How can I keep the ratio of the frame with the background 1:1 when automatically resizing the external container? As an example, a product card with image 1:1. Now it is either impossible to do this, or the strict preservation of proportions is hidden in the settings. Currently (2.17), the frame stretches in width without maintaining the frame’s 1:1 proportions.
Lock ratio doesn’t work?
Hey @Stan_Ezersky, if I understand what you’re describing, this is tricky right now. There are some potential workarounds depending on how you’re doing layout and images.
The resizing constraints can be useful if you set both axes to Scale. However, these are not compatible resizing across both axes with Flex or Grid layouts.
Right now, if you have a scaling element inside a Flex or Grid layout, you can set it to full width or full height, and it will scale in that direction, and while the image fill itself will keep its aspect ratio, the board/frame/element will preserve the original width or height of the other axis. So this makes responsive layouts difficult with elements like images where you want to preserve specific ratios for layout consistency and alignment.
CSS-like properties for a set aspect ratio or image positioning/sizing could help us out here.
If anyone else has come up with a workaround for this, please share. And I’ll come back here if I come up with one in the future!
(post deleted by author)
Thanks for your answer, Laura!
Here is a recipe for responsive images in CSS
.container img {
max-width: 100%; /* Prevents the image from overflowing its parent */
height: auto; /* Maintains the original aspect ratio */
}
BTW, the established aspect ratio (Lock ratio) must work. It doesn’t work right now.
I hope it will be fix as soon as possible.
P.S. There are no issues with this in Figma.
