Example collection: https://milkymotorsports.com/collections/accel
As the title mentions, I’m trying to get product images to “contain” (have a rectangular image fully visible and not get cut off) in collections while still staying in a square-shaped image. Photo attached, the perfect examples are the 2 product images on the right.
The images already have square layout dimensions at the example url.
Is that an example of how “perfect” it should be and all other images are the problem..
or examples of the “perfect” problem…
Avoid “perfect” in troubleshooting or technical requests without qualifiers: “perfect problem examples” v “perfect working examples”.
To make images “contained” within the space of an img tag, in a .media element , use the following CSS at the bottom of base.css. 
However be aware this causes it’s own issue where now images seem to shrink when that image has a short aspect ratio with either no transparency or no solid white background; On example page see image for: ACCEL Spark Plug Wires - 8mm THUNDERSPORT CUST FIT BLUE , or disable the background color style.
ALWAYS backup themes before changing code.
.card__media .media img {
object-fit: contain;
background: white;
}
Normalizing images with only CSS can be a losing battle, and should only be used as a temporary band-aid.
Fix issues like this at the file level by normalizing image dimensions and aspect ratios; Or complete background replacement.
Especially if a business is multichannel because merchants cannot control the product image layout-styling on platforms like facebook, google, etc.