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:
28 Replies
However, in the codesandbox I posted, the columns in the middle take up extra horizontal space.
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
have you tried not setting a width to the images?
and also setting a max-width and an aspect ratio?
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" />have you tried to play around with object-fit?
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.
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 thatfor the images? or for the columns?
image
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?
each column should be a different width
have you turned flex-grow off?
by "turn off flex-grow" do you mean set
flex-grow="0" or something else?
and on which part, the images or the columns?yer, or do something like
flex: 1; on the image flex box
flex: 1 is already set on the image and its container div
I set it just then and it fixes the column
this is after I turned flex: 1 off from the div children
Ah, on the columns
on one of your many divs yes
That looks right!
Thank you!
👍
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.I'm unsure as I'm no longer on my computer if you have the basic reset for an image
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 proportionalAspect-ratio may be helpful in your case to prevent having to set a fixed height
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?
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
you can read the size of the image in the server
then set the aspect ratio for the images