Image height issue

  • Resolved alexfargier

    (@alexfargier)


    4 years, 6 months ago

    When I publish a page on my website with an image, the image loads as a height cropped version of itself.

    On this page the image is shown with 2 different layouts, showing the same cropping behaviour on both images: https://www.biomusicone.com/img-height-issue/

    The style source, woocommerce-layout.css, (.woocommerce img, .woocommerce-page img) height property is set to auto. Changing this to a fixed value on inspection with dev tools stretches the image, suggesting it has been cropped when the page loaded.

    Usually the whole image displays properly, in this case showing the full phone screen:
    https://www.biomusicone.com/wp-content/uploads/2020/09/App_screenshot_4_new_noBorder_arrow_noBlur.png

    I had never had this behaviour before (hard to say before when, but definitely before the last couple of Woocommerce updates, maybe before 4.4.2). I’m posting in this forum because the woocommerce style seems to be at fault, but in truth I don’t know if it’s due to a recent Woocommerce update or due to something else like my theme (Divi) or a plugin.

    I also have no idea what to do about it. Usually I’d expect to be able to debug this by changing the height of the element or wrapping elements in dev tools, but in this case this doesn’t help. It appears the image is cropped, but I don’t know why or how.

    Has anyone had this kind of problem before?

    Many thanks for any help anyone can provide.

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

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

  • Hi there,

    > in truth I don’t know if it’s due to a recent Woocommerce update or due to something else like my theme (Divi) or a plugin.
    ?
    The best way to determine this is to:

    • Temporarily switch your theme to Storefront
    • Disable all plugins except for WooCommerce
    • Repeat the action that is causing the problem

    If you’re not seeing the same problem after completing the conflict test, then you know the problem was with the plugins and/or theme you deactivated. To figure out which plugin is causing the problem, reactivate your other plugins one by one, testing after each, until you find the one causing conflict. You can find a more detailed explanation on how to do a conflict test here.

    I hope this points you in the right direction.

    Plugin Support mouli a11n

    (@mouli)

    It’s been a while since we heard from you, so I’m marking this thread resolved. Hopefully, you’ve been able to resolve this, but if you haven’t, please open up a new topic and we’ll be happy to help out.

    Thread Starter alexfargier

    (@alexfargier)

    Many thanks @kosiew for your suggestions.

    In the end, and somewhat frustratingly since I’ll never know why this happened, deleting the images from my library and re-uploading them was enough for wordpress to start displaying them properly again.

    But doing the conflict testing was useful anyway because after doing it, I tried just displaying other images from my image library, which did in fact display properly. Should have thought of doing this earlier!

    Btw, as an fyi regarding using storefront for testing, since the website uses Divi, this doesn’t seem to help because I just ended up seeing all the Divi shortcode after switching themes.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image height issue’ is closed to new replies.