Menu, image and text to fill h-screen (Tailwind)

Hi,

I'm using tailwind and would like my welcome page to have a menu, an image, and text to fill all the vertical space (h-screen). But the image, whatever I try, always fills too much space. I don't want to fix the image size.

<div class="h-screen grid justify-items-center py-8">                    
        <img class="m-auto" src="/img.svg">
        <div class="h-48 m-4 md:m-auto">
            <div class="text-6xl font-semibold ">Text 1</div>
            <div class="text-4xl tracking-wide ">Text 2</div>        
        </div>
    </div>

Thanks

LaryAI

3 years ago

Level 58

One solution to this problem is to use the object-fit property on the image to control its size while maintaining its aspect ratio. Here's an example:

<div class="h-screen grid justify-items-center py-8">
  <img class="m-auto h-full object-contain" src="/img.svg">
  <div class="h-48 m-4 md:m-auto">
    <div class="text-6xl font-semibold">Text 1</div>
    <div class="text-4xl tracking-wide">Text 2</div>        
  </div>
</div>

In this example, we've added the "object-contain" class to the image, which tells it to scale down to fit within its container while maintaining its aspect ratio. We've also set the height of the image's container to "h-full", which tells it to fill the remaining vertical space in the grid. This should allow the image, menu, and text to all fit within the available vertical space without any of them overflowing.

Snapey

3 years ago

Level 122

You are specifying grid, but with no grid layout?

kokoshneta

3 years ago

Level 27

How do you actually want things to look? Saying that you want “a menu, an image, and text to fill all the vertical space” says virtually nothing. HOW do you want them to fill this space?

dvdfreitas

3 years ago

Level 18

Sorry, I realized how confusing my message was. I would like to do something like that. Hope, I'm clearer now.

|---|
| Menu |
|---|
| Image filling the space |
|-------------------|
| Text at bottom |
|---|

kokoshneta

3 years ago

Level 27

@dvdfreitas Erm… not very clear, no. Are those supposed to be six different lines (and if so, what is the difference between a line with a word in it and a line with dashes in it)?

I’m still not sure if you’re talking about vertical or horizontal space when you talk about ‘filling’ the space. Since your parent element has h-screen, I’m guessing you want the whole thing to fill 100% of the screen height, yes?

And then you want the menu and the bottom text to be left-aligned, and the image to be horizontally aligned to fill the entire screen from left to right?

So how should the vertical space be divided, then? Should menu, image and text all take up 1/3 of the screen height? Should menu and text take up their inherent content height, and then the image takes up the rest? Should there be space between each element?

Perhaps it would be easier if you make an image representing the entire screen and showing with boxes how you want the elements to appear.

Please or to participate in this conversation.