CODEWITHSUNDEEP
csswordpressimagewoocommerceimage-size
Pat
Pat

Reputation: 727

Image fit to frames (Woocommerce)

I have a problem fitting images while keeping the aspect ratio in the online catalog. I use CSS, and now it looks much better, but some of the images of products doesn't fit the frame. How to make always images fit without cut in a whole in frame?

Upvotes: 0

Views: 6049

Answers (2)

Moid
Moid

Reputation: 1447

As Voreny said, it is because the images that are being used are cropped. But in case if you want to contain the image without cropping use object-fit:contain.

If you want to make the image 100% or cover but maintaining the image proportion use object-fit:cover. But this property will crop your image a bit to maintain the proportion.

Try this:

.woocommerce-page .product-holder .product-img{
height: 200px;
width: 200px;
display: flex; // Remove this
}
.woocommerce-page .product-holder .product-img.no-border img{
    height: 185px;
    object-fit:contain;
}

Upvotes: 3

Voreny
Voreny

Reputation: 785

If you look at the source it's those images that are cropped this way, not styling's fault.

Upvotes: 2

Related Questions