How to make images fit container

  • Resolved zmeiq

    (@zmeiq)


    5 years, 8 months ago

    Hi guys,

    I would like to bulk upload product images with different proportions, but if I do so, the thumbnails in the catalog are not aligned and it is not visual a pealing. It looks like this: https://ibb.co/qRLtMHS

    Is there a way to crop the images with css or plugin, so to be aligned. Images are in large resolution, so if they are cropped, the quality will remain.

    If I do this manually, it takes forever.

    Thanks in advance.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Dashboard > Appearance > Customize > WooCommerce > Product Images
    and choose either square or custom cropping.

    The image thumbnails should regenerate to the new sizes automatically, but that may take a while.

    Thread Starter zmeiq

    (@zmeiq)

    That’s fine in case I own the images.

    If images are from third party?

    Thanks in advance.

    Sorry, don’t know. Hopefully one of the Woo team will come into the thread.

    Thread Starter zmeiq

    (@zmeiq)

    Anybody ? ??

    Thread Starter zmeiq

    (@zmeiq)

    Nobody faced such challenge ?

    That’s a great question. As long as the images are in your media library on your site, they will resize for you when you make this change. If you have an image on your site that is loading directly from another site, then it would not be resized for you.

    If you run into any trouble as you try this, let us know.

    Thread Starter zmeiq

    (@zmeiq)

    @3sonsdevelopment, @lorro, Thanks for the answers.

    I managed to fix the images, but they are not proportionally cropped, so some of the images are stretched or blurry.

    I believe there is a way just to crop with proper ratio (css).

    Open for suggestions. Thanks in advance once again.

    If you’d like to send over the URL to a page with the blurry/stretched products, I’d be happy to take a look.

    If you need to crop anything with CSS, you can do that with a clip-path. CSS Tricks has an article about that at https://css-tricks.com/clipping-masking-css/

    Hi @zmeiq,

    It’s been a while since we heard back from you so I’m going to close this thread now. If you have any questions, please feel free to open up a new topic.

    Cheers

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to make images fit container’ is closed to new replies.