Hi I am struggling with the following. I am trying to get the images to fit inside the divs that are in a GRID. I won’t know the size of the images, so when someone adds an image it should just fit in the div without causing it to break like it does now. Can anyone help me please.
Well you almost had it but i found out u did make the same mistakes as this one bellow
1st:
You need to specify a maximum height on the image so it could not overflow the container:
The second problem, which is to scale the size of the image container, and drag up the grid items below when the image gets smaller, is significantly more complex.
This isn’t an issue relating to the image. In fact, you can remove the image altogether when trying to solve this problem.
This is an issue of dynamically sizing a grid item (the image container). Why would this grid item change size in relation to the image size, when its size is being controlled by grid-template-columns and grid-template-rows ?
In addition, why would the bottom row of grid items ( tag , album , rotate ) follow the image container either up or down? They would have to exit their row.
Scaling the entire grid container wouldn’t be a problem. But it seems like you only want to scale one grid item (the image container). It’s tricky. You’re probably looking at additional containers, auto values for lengths, and possibly scripting.
Here’s what happens if you give the image rows an auto value: JSFiddle demo