I am trying to place these images in the center of each space, but the images break, what would be the ideal size of the image so that it does not break?
You can use Cloudinary:
The best thing is to make sure the ratio of the image matches the container you are trying to put it in. If it was square container, it would be a 1:1 ratio, which mean the the width and height must match. In your case, you want an image with a 3:2 ratio. That means it could be 30x20, 300x200, 3000x2000, 600x400, 1080x720, etc. Size doesn’t matter so much. It’s the shape of the image that matters the most. As long as the dimensions are correct, then the image will fit entirely. Otherwise it will be cropped so it can fit within that ratio.