@JonathanT
My image is set to scale proportionally, with 100% width and 80vh height.
It is set to scale proportionally.
I understand that 100% width is concerning the parent, but if there’s a set height to the image, and it is scaling proportionally, then the image has to have a width.
That width is being ignored by the parent container.
And it get’s it’s width from another element that is significantly thinner.
Another point, is that the parent container overflow is set to show, but the rest of the image is not being shown.
Why can only height be set to auto?
Since 100% is obviously isn’t cutting it, images need to have width auto settings, or max content, or whatever, like yesterday :-/
The image element does not have content that can determine the width of a max-content container. That’s why your container fits itself to the only content it has, which is the text elements or the toggle that I see in your screenshots.
If you’re looking to achieve a similar layout to the screenshot below, you need the items to rely on an element that can actually determine the width in a Repeater, such as text.
I’ve added a text element behind the image and changed the length of it in the Repeater Items.
Regardless, to answer your question - width can be set to “Auto” if you dock the element to both sides.
Alright, I’ve set the width to auto but it’s not actually affecting the width of the parent so maybe it needs a max content.
When the height is set to auto it *does affect the height of the parent. At least when the the parents height is set to auto.
So here we are meet with the same issue toward the parent, not having an auto option for width.
Anyway.
I understand why it’s not working, as you say, it not having max content to read for width.
But what I’m saying is that it should have it? I mean it’s scaling proportionally right?
And it’s made out of pixels?
So what’s the problem reading the width?
I have a different work around, each row gets one image with set width, usually one I don’t want to crop, and the other images get stretched to fit their elements and get cropped a bit on the sides.
But that’s monkey business…
@jonathant
This issue with the image width not scaling proportionally to their height is repeating all the time.
@sabugen It’s quite a tricky behavior, but you can achieve it as I showed you by using a text element and set it to scale.
Here’s a quick video
@jonathant
Thanks but this does not help anything, I need the image width to be proportional to it’s height and not set in any way other than max-content of itself.
@jonathant
imagine having 50 images, all have different width.
How will you arrange them on the page to look organized?
Only one option, give them all the same height, and have the width responsive to that.
@jonathant
Even a masonary system won’t cut it, it’s bearable in galleries where the option to enlarge is valid.
But if you want direct display, you get something like this huge panorama looking like a tiny ant amongst giants, instead of filling up the the width of the page and taking up it’s own row.
Anyway, hope you can see how much I, and I imagine many others, need this max content to work with images. They are very restricted in design as they are.
The solution is the following:
→ put it inside a container
→ in the left sidebar set the container “Size” to “Advanced Settings”
→ this will automatically apply a CSS-Grid, so go down to Layout>Advanced CSS Grid
and twirl open the Rows(1) submenu by clicking the little black triangle to the right
→ this will reveal the culprit: Row height is set by default to “min/max”
→ press on it to reveal the submenu and select “max content”
->PROBLEM SOLVED
(I know it’s cumbersome that this essential feature is hidden under 2 submenus, and I already asked Wix to move it to a more easy accessible/visible location in the menus!)
I really have to thank Vanja from Wix support (Product Support Specialist) for pointing this solution out to me!
