Handling thumbnails for different aspect ratios

  • Resolved dannydandan123

    (@dannydandan123)


    4 years, 4 months ago

    This seems like something fairly straightforward, yet I can’t come across a solution.
    My store has images of different sizes / aspect ratios. While I realize this may not be ideal, I need to find a solution that does not involve cropping them.
    Here’s what this looks like now (300px width thumbnail width, no cropping):

    View post on imgur.com

    Note how the “add to cart” buttons, descriptions, price are not aligned due to the different image heights.
    What I’d like is to center the images to the tallest one in the grid row, adding padding on top and bottom as necessary. Example here:

    View post on imgur.com

    This layout, in my humble opinion, is a good compromise. Can also limit the height to something reasonable so it doesn’t get too crazy for very tall and narrow images.

    I’m 99% certain this is possible purely with CSS, with no cropping or image resizing. I just need some guidance on CSS that would be fairly robust and unlikely to break with version updates.
    Would really appreciate if someone could help me out!

    Thanks in advance!!!

    P.S. if what I’m saying doesn’t make any sense please let me know. I’d love to know how others have approached this problem.

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

  • Hey @dannydandan123

    You are correct, this is something that may be fixed using some CSS. I would attempt to set a predetermined height for the image and leave the width set to auto. It would look something like this:

    .post-type-archive-product img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    height: 200px;
    width: auto;
}

    You would want to add this to your CSS section in Appearance ? Customizer ? CSS. You could also hire a developer to fix this problem for you. We highly recommend using developers on our Customizations Page.

    Plugin Support Thu P. a11n

    (@thup90)

    Hi there,

    I hope you found the previous reply helpful. We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Handling thumbnails for different aspect ratios’ is closed to new replies.