Product image height be constant - by Thinktech

This topic has 4 replies, 2 voices, and was last updated 5 years, 4 months ago ago by Olga Barlow

  • Avatar: Thinktech
    Thinktech
    Participant
    August 5, 2019 at 13:19

    http://saibabamachines.com.cp-45.webhostbox.net/product/ex-308-turn-mill-center/
    1.Height should be constant for all image in product details page
    http://prntscr.com/ook2d0
    2.when clicking on zoom in ,reduce the height by 10%;
    http://prntscr.com/ook3o5

    3 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    August 6, 2019 at 07:39

    Hello,

    1) If you limit the max-height of the image then you will get the white space before and next to the image, for example http://prntscr.com/oowj7k
    If you just want to place the gallery slider at the top use the following code

    .gallery_vertical .woocommerce-product-gallery {
        align-items: flex-start;
    }

    2) To limit the zoom window use

    .mfp-figure figure img {
        max-height: calc(90vh - 50px) !important;
    }

    Regards

    Avatar: Thinktech
    Thinktech
    Participant
    August 6, 2019 at 11:05

    for zoomed in image now its looking good.
    1.Height Should be in constant, since height is getting changed.kindly height of the image should take in fixed height.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    August 6, 2019 at 14:33

    Hello,

    Sorry but WooCommerce plugin does not have the option to limit single product image height and enable cropping for it. So you can use custom CSS to limit the height, for example

    .woocommerce-product-gallery.images .owl-item img {
        max-height: 264px;
        width:auto;
        margin:0 auto;
    }

    or use all the images with the same height (edit images using graphic redactor before uploading them to your media library).

    Regards

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.