CSS grid and image
So im having issues with image behaviour in css grid. HTML and CSS code will be provided down but to explain:
I have 2 columns in grid where one (containing img) is 35% width while other (content) is 1fr or 65% meaning rest of the grid width. Now when i resize dimensions to make it smaller using inseptor tool (responsive) it works as it should. The image witdh is 35% and its height is equal to height of content div. But when i expand the dimensions the image continues to expand and because of that makes the content div height bigger and bigger making white space in it.
What I want is that height of image stops expanding and is equal to height of container div. Without setting fixed height since content div should be able to get or lose more elements so its height will be changed depending on the content that is rendered.
9 Replies
HTML code
CSS code
This is good and how it should be always img height = to content height. The white below text is padding up to border.
This is bad. See the white below text. It is created due to img expanding and thus grid sets all column height to heighest column.
Ive tried almost everything and nothing managed to fix it...
Can you put this in a codepen? Images are a bit finnicky to get working the way you want them to so I'm not sure if I'll be able to help
I've ran into your issue multiple times and I've always solved it with a
background-image
, but that isn't a great solution when the image is important to the contentmake the figure position relative and the image position absolute;
that way the figure takes the size of the grid-cell, and the image adjusts to that.
I think that solves it. TY.
no problem, good luck on the project!