Flex垂直对齐异常：WooCommerce商品悬停图片拉伸错位

Got it, let's tackle this—your flexbox centering works perfectly for main product images, but the hover plugin you installed is overriding those styles and messing up the alignment and stretching. Here's how to fix it:

Why This Happens #

The image hover plugin is likely applying its own default styles to the hover image container (like forcing a block layout instead of inheriting your flex setup) or setting fixed width/height values on the hover image itself. This breaks your carefully set vertical centering and causes the unwanted stretching you're seeing.

Step-by-Step Solution #

Add this custom CSS to your site to enforce your flexbox centering rules for the hover images and keep their aspect ratio intact:

/* Force hover image container to match your main image flexbox setup */
.product .woo-image-swap__image-wrap {
    display: flex !important;
    height: 320px;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevent images from spilling outside the container */
}

/* Stop hover images from stretching, preserve natural aspect ratio */
.product .woo-image-swap__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

How to Apply This CSS #

• Head to your WordPress dashboard
• Navigate to Appearance > Customize > Additional CSS
• Paste the code into the provided text area
• Click Publish to save your changes

This will override the plugin's conflicting styles, making the hover images align vertically centered exactly like your main product images—no more stretching or top-aligned weirdness.

内容的提问来源于stack exchange，提问作者Lukas Kollin