Maximize image size, minimize column width

https://codesandbox.io/p/sandbox/columns-rsfszr?file=%2Fsrc%2FApp.tsx%3A17%2C50 I am trying to lay out a series of columns, each of which includes a heading, an image, and some text. The image should fill the height of the space not taken by text, and should maintain its aspect ratio as it grows or shrinks. If the image is wider than the text, its column should match the width of the image. If the text is wider than the image, its column should match the width of the text. In other words, the column should match the width of the its widest child, and take no additional horizontal space. Here is a mockup I laid out by hand of the layout I am trying to achieve:
No description
28 Replies
Kona (she/her)
Kona (she/her)10mo ago
However, in the codesandbox I posted, the columns in the middle take up extra horizontal space.
No description
Kona (she/her)
Kona (she/her)10mo ago
I'm fairly sure this is the result of competing flex attributes: the images should flex to take up vertical space and corresponding horizontal space, but setting the columns to 'fit-content' or 'min-content' causes the images to lose their aspect ratio
ἔρως
ἔρως10mo ago
have you tried not setting a width to the images? and also setting a max-width and an aspect ratio?
Kona (she/her)
Kona (she/her)10mo ago
The images do not have width set the images vary in aspect ratio <Image flex="1" src={card.img} minH="0" maxH="100%" alignSelf="center" />
ἔρως
ἔρως10mo ago
have you tried to play around with object-fit?
Kona (she/her)
Kona (she/her)10mo ago
That changes how the image fits within the column, but the columns width is the problem. As you can see in the example, the middle column gets extra space it shouldn't.
ἔρως
ἔρως10mo ago
by the way, try display block with margin 0 auto instead of flex images are weird af and funky, dont know if some weirdness comes from that
Kona (she/her)
Kona (she/her)10mo ago
for the images? or for the columns?
ἔρως
ἔρως10mo ago
image
Coder_Carl
Coder_Carl10mo ago
so just checking really quickly because it seems like the questions hadnt been discussed properly. are you wanting each of the 3 columns to remain at the same width if there is a wide picture, then all 3 of the columns would be the same width rather than 2 small and 1 wide?
Kona (she/her)
Kona (she/her)10mo ago
each column should be a different width
Coder_Carl
Coder_Carl10mo ago
have you turned flex-grow off?
Kona (she/her)
Kona (she/her)10mo ago
by "turn off flex-grow" do you mean set flex-grow="0" or something else? and on which part, the images or the columns?
Coder_Carl
Coder_Carl10mo ago
yer, or do something like flex: 1; on the image flex box
No description
Kona (she/her)
Kona (she/her)10mo ago
flex: 1 is already set on the image and its container div
Coder_Carl
Coder_Carl10mo ago
I set it just then and it fixes the column
Coder_Carl
Coder_Carl10mo ago
this is after I turned flex: 1 off from the div children
No description
Kona (she/her)
Kona (she/her)10mo ago
Ah, on the columns
Coder_Carl
Coder_Carl10mo ago
on one of your many divs yes
Kona (she/her)
Kona (she/her)10mo ago
That looks right! Thank you!
Coder_Carl
Coder_Carl10mo ago
👍
Kona (she/her)
Kona (she/her)10mo ago
I notice that if I remove white-space: nowrap;, the images do not maintain their aspect ratios as they shrink Is there any way to prevent them from becoming distorted? Ah, indeed, it seems that rather than taking the width proportionate to their height, the images are just matching the width of the text So this still doesn't let the images be wider than the text.
Coder_Carl
Coder_Carl10mo ago
I'm unsure as I'm no longer on my computer if you have the basic reset for an image
image {
display: block;
width: 100%;
}
image {
display: block;
width: 100%;
}
Kona (she/her)
Kona (she/her)10mo ago
No luck, unfortunately! Finally getting the behavior I wanted by setting display: inline-block; on the column divs This only works with fixed heights (eg 'height: 392px' instead of 'height: 100%') -- I might be able to make it more flexible, but I'm fine with manually adjusting the height as needed, as long as the image stays proportional
clevermissfox
clevermissfox10mo ago
Aspect-ratio may be helpful in your case to prevent having to set a fixed height
Kona (she/her)
Kona (she/her)10mo ago
each of the images has an arbitrary aspect ratio my understanding is that I would have to calculate it based on the image's width and height, and which point I would be able to calculate the adjusted width anyway unless I'm missing something about how aspect-ratio works?
clevermissfox
clevermissfox10mo ago
My thought was to put each of the imgs in a div as bg images, w bg size cover and then set the width and aspect ratio of that div to whatever size you need it to be
ἔρως
ἔρως10mo ago
you can read the size of the image in the server then set the aspect ratio for the images
Want results from more Discord servers?
Add your server