Hey all - Anyone have any hints on how to make an image fill space vertically? I have a full length portrait (below) that I want to place in the cell of a grid within a section. I want it to:
Fill the cell vertically, so that the subject’s head and shoes always show (i.e. the picture is always shown at full height)
Anchor it to the right side of the cell, so the subject’s left arm never gets cut off (right side of image)
Allow cropping of the left side of the image as needed, either adding extra space to the left of the subject’s right elbow when getting wider or cutting the elbow off when getting narrower. The cell is on the left side of the strip, so anything that is cut off will bleed off the page in a natural looking way.
This seems like it should be simple given how versatile/powerful EditorX is, but I can’t for the life of me figure it out. I’m sure I’m missing something simple. Thanks for any tips.
I had the same issue and the way I made it work was to make the grid cell the same format as the image. I had a square image so I made both the column and row the same vw% (just don’t use the % or fr options) and set the image to fill the cell.
Wow, that was super smart of you. I tried it and it worked 90% of the way for me, better than anything I’ve tried before. Since my image wasn’t square, I used a ratio for setting vw. My image is 800w x 2000h, and I want it to fill 33% of the section width, so I set the grid column to 33vw and the grid row to min 82.5vw / max-content, which is the same ratio as my image. That worked great in all situations where the content in the other column didn’t push the row height beyond 82.5vw. But when it did, both sides of the picture were cropped when instead I’d like only the left side to be cropped (i.e. anchored to the right side of the grid cell). Any thoughts on that?
Regardless, I will definitely go with your solution as it is the best thing I’ve tried so far. Thank you very much for your help!
Glad it worked, almost! Does your image include the yellow background? You may get better results if you use a cut out image and set the background color in the container? If only we could set a gradation fill!!
No, I just used the yellow to illustrate the full width in the example. The actual image I’m using is a png with a transparent background, cropped tight to the image.
After thinking about this, do you (or anyone) know of a way to maintain the ratio of the grid cell without tying it to the absolute size of the viewport, so that the row height can shrink and grow freely with content size in another column but the cell with the image still maintains its ratio? On big screens your solution above can create a lot of white space because it is tied to vw. I know there is a calculation option for grid units, so what I’m looking for is to set row height to some number multiplied by column width. But I’m guessing that is a bit too sophisticated at this point, and I haven’t found any detailed documentation/examples of how to use calculation grid units yet.
