I am attempting to remove the excessive width and match it to the image while still retaining the full size of the card and keeping the image centered and not stretching the image. Most of the post I found on this topic suggested inline-block but this breaks the card for smaller images. I'm sure this is something simple but I cant seem to figure it out.

CodePudding user response：

the main reason for this is that you are using object-fit: contain. Even if it seems like that the images are smaller, they still use up 100% of space.

My suggestion would be removing display: inline from the img-div class and adding:

.img-div {
 width: fit-content;
 margin: 0 auto;
}