Kona (she/her)
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
unless I'm missing something about how aspect-ratio works?
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
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
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
each of the images has an arbitrary aspect ratio
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
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
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
Finally getting the behavior I wanted by setting
display: inline-block; on the column divs44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
No luck, unfortunately!
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
So this still doesn't let the images be wider than the text.
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
Ah, indeed, it seems that rather than taking the width proportionate to their height, the images are just matching the width of the text
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
Is there any way to prevent them from becoming distorted?
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
I notice that if I remove
white-space: nowrap;, the images do not maintain their aspect ratios as they shrink44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
Thank you!
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
That looks right!
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
Ah, on the columns
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
flex: 1 is already set on the image and its container div
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
and on which part, the images or the columns?
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
by "turn off flex-grow" do you mean set
flex-grow="0" or something else?44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
each column should be a different width
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
for the images? or for the columns?
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
As you can see in the example, the middle column gets extra space it shouldn't.
44 replies
KPCKevin Powell - Community
•Created by Kona (she/her) on 1/18/2024 in #front-end
Maximize image size, minimize column width
That changes how the image fits within the column, but the columns width is the problem.
44 replies