Tailwind question tailwind discord is | Next.js | Page 1

hushed verge Aug 14, 2023, 5:25 PM

#

Is your goal to make the picture take as much space as possible to fill the card? Can you maybe provide the corresponding tailwind classnames?

drowsy skiff Aug 14, 2023, 5:26 PM

#

No I dont have an exact height in mind but around half the card

hushed verge Aug 14, 2023, 5:27 PM

#

Im happy to help but i need a bit more context :D

drowsy skiff Aug 14, 2023, 5:27 PM

#

large screen

#

phone screen (sorry doesnt all fit lol)

#

basically i want the cards to always be the same size

#

and the images to have the same max height relative to the card

#

images can be any size (width and height)

#

so i need some kind of container for the images

#

not sure how to do it relative to the card size though

#

since on a phone the card is maybe 400x300 and on a monitor its maybe 300x200

#

not really sure how to describe the problem lol im not a frontend person

hushed verge Aug 14, 2023, 5:30 PM

#

Im honestly not quite on the page what you mean with relative to card height, if the height of the card is fixed you could just hard code it, im guessing that is not the case

drowsy skiff Aug 14, 2023, 5:30 PM

#

the height of the card isnt fixed

#

hushed verge Aug 14, 2023, 5:32 PM

#

if i dont miss something the provided code includes nothing related to height, do you have the code that defines the height?

drowsy skiff Aug 14, 2023, 5:32 PM

#

the height of the card isnt fixed

#

nor the width

#

but i want to set the image size relative to the current card size

#

whatever it may be

hushed verge Aug 14, 2023, 5:36 PM

#

If you got the time a runnable code pen would be awesome. https://play.tailwindcss.com/ and https://picsum.photos/ could be used

Alternativly i would like to see the <Card /> implementation

Currently the cards size is defined by the grid but i am not sure where the overall size comes from.

I do understand you correctly that you want every card to be the same size?

#

If i take your request at face value, you could read the height of the card and calculate the height you want in javascript, but this is rarly optimal, you would also have either a loading state or a flickering because the calculations take effect after the first render

#

so i am kinda looking for what you want it too look and behave like so we can work out the best solution

drowsy skiff Aug 14, 2023, 5:37 PM

#

the card size (in a row) is defined by the biggest card (obviously, its grid)

#

well height is

#

width is split evenly between all the cards

#

if i have an image thats 500x300 and an image thats 300x300 i want them to be scaled to the same height inside the card

hushed verge Aug 14, 2023, 5:38 PM

#

ah okay we getting closer

#

But what height is the height you want? Set by you or do you want to take the height of the largest image of the cards or something?

#

the first would be easy, we can decide how images fit to set sizes by object-fit

drowsy skiff Aug 14, 2023, 5:41 PM

#

the height i want is around half of the card's height but since the card's height can change (pixel count wise) i want to set the image height relative to that

hushed verge Aug 14, 2023, 5:42 PM

#

yes but the deciding factor for that card height is by the tallest image or not?

drowsy skiff Aug 14, 2023, 5:42 PM

#

if the card is 500x400 i want the image to be maybe 250x200 and if the card is 400x400 i want the image to scale

drowsy skiff Aug 14, 2023, 5:42 PM

#

hushed verge yes but the deciding factor for that card height is by the tallest image or not?

as of right now yes but i dont want it to be

#

honestly i dont know what i want 😂

#

gotta play with it until i think it looks good

hushed verge Aug 14, 2023, 5:44 PM

#

we can work with flex inside the card and use flex values to give "percantages"
Well if you are unsure yet how to decide on the card height i would suggest to define a fixed height (can ofc. be different for different screen sizes) and than put every image into those constraints

drowsy skiff Aug 14, 2023, 5:44 PM

#

#

#

same screen breakpoint just changed the size a little bit and the cards change size

hushed verge Aug 14, 2023, 5:45 PM

#

Yes because of the text

drowsy skiff Aug 14, 2023, 5:45 PM

#

i want the images' height to be x% of the cards' height

hushed verge Aug 14, 2023, 5:47 PM

#

We can define the images to take as much space inside the cards as possible to still display the text and buttons

If we were to set the height of the image to 30% then always 70% will be the text and buttons, the height would be taken from the largest text (which then would define the images height)
that is possible, does that sound how you intend it to be?

#

That would result in always equally sized TextAndButtons areas and resized images to fit the remaining space.
However, if you have a really big largest TextAndButtons area other TextAndButtons areas would look quite spaced out, but be the same size
The other approach is: always the same desity for TextAndButtons areas but different sizes

#

The overall Card is ofc always the same size

#

If any of that sounds similar to what you want to archive we can implement that with flex and object fit

drowsy skiff Aug 14, 2023, 6:01 PM

#

The main problem is I want the images to always have the same bottom position

#

So if 1 image is really tall and the other is short the scale to be the same height so everything else in the card lines up

hushed verge Aug 14, 2023, 6:03 PM

#

Ok i think i understand

#

Can you give me the code from earlier as text? Just put them inside three of these ` at the beginning and end

#

so i dont have to type it letter by letter

drowsy skiff Aug 14, 2023, 6:07 PM

#

I’ll be home in a few minutes had to go do something

hushed verge Aug 14, 2023, 6:09 PM

#

to summarize what i would change (depending on what card has implemented)
The Image and the TextAndButtons go into a flex flex-col
The image has something like flex-[3] and the TextAndButtons flex-1
Then you want to define the object fit on the image, mainly whether you want it cropped (object-cover) or isert whitespace when aspect ration doesnt match but always show the whole image (object-contain)
If you are to use object-cover you can also specify where to focus the cropped image by object-position, otherwise its centered (probably just fine for your use case)

#

Im off for a bit soon; but if you dont follow my summarisation just give me the code in this thread and i can modify it later today. I have turned on notifications for this thread :D

drowsy skiff Aug 14, 2023, 6:13 PM

#

Prob object contain

#

I’m gonna play with it today and figure out how I want it to look

#

Thanks for tips

hushed verge Aug 14, 2023, 6:15 PM

#

You're welcome ^^ Feel free to hit me up when something arises, im sorry for taking so long to understand your problem :D

drowsy skiff Aug 14, 2023, 6:47 PM

#

hushed verge You're welcome ^^ Feel free to hit me up when something arises, im sorry for tak...

nah i just couldnt really describe it lol

drowsy skiff Aug 14, 2023, 7:12 PM

#

hushed verge to summarize what i would change (depending on what card has implemented) The Im...

this seems to do exactly what i want

#

for the most part

#

cards in different rows are different sizes due to different image sizes but that isnt really a problem since the differences are so small

#

i could also just define a specific card height and that would fix that issue which i might do

#

doesnt work exactly how i need it to actually

#

but its close

#

#

This shows the problem better

#

^ this is without implementing your solution

#

#

^With your solution

drowsy skiff Aug 14, 2023, 7:36 PM

#

drowsy skiff

I want it to look like this one but the green and red lines need to line up for all of them

#

They currently dont because the images are different heights

#

Your proposed solution fixes this if the text/buttons are the same size but if they arent then what is shown in the image happens

drowsy skiff Aug 15, 2023, 7:26 PM

#

got it working

#

that was terrible

#Tailwind question tailwind discord is