Reducing product image within a fixed size

  • Resolved krachtinternetmarketing

    (@krachtinternetmarketing)


    2 years, 3 months ago

    I have given a maximum height to a product image. If the image is higher than 450 pixels, the image will be proportionately placed and the image will be 450 pixels tall. But if an image is narrower in height, the displayed height will also be narrower, causing the gallery to position images upwards.

    I would like the gallery images to always stay in the same position. How do I do that?

    The following code i’ve used:
    .woocommerce div.product div.images img {
    width: auto;
    max-height: 450px;
    margin: 0 auto;
    }`

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Luminus Alabi

    (@luminus)

    Automattic Happiness Engineer

    Hi @krachtinternetmarketing,

    The easiest way to handle this is to ensure that you don’t use images with a height less than 450 pixels. This might require you to have a set template, in your image editor of choice, that you can put smaleer images into so that you can extend the background to make sure that you have the right height.

    When you use an image with a smaller height, you’re asking the system to manufacture additional pixels from thin air, and that’s not something that is going to happen.

    Thread Starter krachtinternetmarketing

    (@krachtinternetmarketing)

    That’s too bad. The products and images are automatically added to the webshop from a product feed from the supplier. We are therefore dependent on the formats provided by the supplier.

    Plugin Support Kaushik S. a11n

    (@kaushiksomaiya)

    Hi there @krachtinternetmarketing!

    You can use CSS object-fit property on images. For example: 

    
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{
height: 450px !important;
object-fit: contain;
object-position: center;
}

    This will make the image height fixed, but for smaller images, it will automatically center and contain them within the viewport.

    Ref: https://www.w3schools.com/css/css3_object-fit.asp

    I hope this helps! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reducing product image within a fixed size’ is closed to new replies.