Today I'm working on the / website. But the image there is incorrect, because I've set the img to object-fit: contain, but if I leave it blank, then it is a weird photo that is zoomed in.

Can anyone help me with it?

Today I'm working on the https://www.vanleeuwenemmen.nl/winkel/ website. But the image there is incorrect, because I've set the img to object-fit: contain, but if I leave it blank, then it is a weird photo that is zoomed in.

Can anyone help me with it?

• woocommerce-offtopic
• css
• html

Share Improve this question asked Oct 21, 2019 at 12:19 Valdemar - memo ictValdemar - memo ict 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You are using cropped image. Your image is 300x300 cropped while the section is bigger. Your first div is already set to 40% width, so limiting the image to 40% in that section doesn't make sense. Use properly sized thumbnail or actual image.

Here is the result i got using actual image /3dcc1cba-c209-4a1a-a1f2-edd17fc8b58e.jpg & NOT 3dcc1cba-c209-4a1a-a1f2-edd17fc8b58e-300x300.jpg using following CSS:

.woocommerce li.product .entry-featured img {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: contain;
}