1

I have a grid with two columns and a row. In one cell I have an image that can grow and shrink, in the other, I have two inputs that make for a fixed height. If I resize the window the height of the image grows far beyond the height of the other row.

I am looking for a way to set the max height of the image to be equal to the height of the other cell so that it never grows bigger than the other column.

I have tried everything I could think of but I couldn't find any solution. If something in my question is not clear don't hesitate to leave a comment, I will more than apply to explain myself further. Thanks in advance !

I want to get rid of the space in yellow:

Sceenshot of the grid in its actual state. I want to get rid of the space in yellow

At the moment I am using tailwindcss. The code for the grid and its contents is the following:

<div class="grid grid-flow-col auto-rows-auto auto-cols-auto gap-5">
        <figure class="max-w-lg">
            <img
                class="max-w-full max-h-fit rounded-lg"
                src="https://avatars.githubusercontent.com/u/98087889?s=40&v=4"
                alt="image description"
            />
            <figcaption class="mt-2 text-sm text-center ">
                Avatar
            </figcaption>
        </figure>
        <div class="space-y-4">
            <div>
                <label class="block mb-2 ">Input</label>
                <input
                    class=" block w-full p-2.5 "
                />
            </div>
            <div>
                <label class="block mb-2 ">Input</label>
                <input
                class=" block w-full p-2.5 "
                />
            </div>
        </div>
    </div>
offgabriele
  • 15
  • 3

1 Answers1

0

In your <img> tags you can just set the max width of the image to a set value:

<img
  class="max-w-lg max-h-2 rounded-lg"
  src=.....
  alt=....
/>

This would allow you to change the size of the image but it would stop at a max specific value. You could then use the same max values for the input boxes. This would allow them to match.

Also, check Tailwindscss website for further information on how to use these values.

UmHeyThere
  • 85
  • 11
  • 1
    I followed your advice and added `max-w-[164px]` which is the height of the other cell. Now the image wont grow beyond that value, the problem is now that the image cell still takes the old width, leaving an ugly empty margin on the right size [link] (https://imgur.com/lg605Py). How can I make the cell fit the content? @UmHeyThere – offgabriele Sep 05 '22 at 10:04
  • If you max the width size of the `figure` tag instead of `img` tag that should fix this (or max both of them so that they are both limited). – UmHeyThere Sep 05 '22 at 14:31
  • I believe this approach is not solving the core issue. Once the max height is hard coded to be equal to the height of the form the grid will not adapt if the state of the form changes. For example if an error label appears somewhere in the form the img will be too small. This could be solved with javascript but it would be better if the img resized with the max height equal to the other element of the grid via css. Could you help me with that? – offgabriele Sep 06 '22 at 19:28