width:auto not working

Page is http://newdrim.wpengine.com/product-category/electric-ranges/cooktops-electric/ and the image width is not scaling and the image height width ratio is wrong and messes up the picture. I've tried:
.category-products .h-product img, .section-single-product .h-product img { width:auto !important;}
and it doesnt work, but the selector seems to be correct because .category-products .h-product img, .section-single-product .h-product img { width:100px !important;} DOES make the image 100px wide. What CSS can I do to get the image to show completly but keep the height width ratio correct so the image is not distorted

  • Predrag Dubajic
    • Support

    Hey Jonathan,

    Hope you're doing well today :slight_smile:

    I had a look at the page in question and the images don't actually look distorted to me so I'm not sure that I understand what the issue is here and could use some additional info :slight_smile:

    Are you trying to get all the images to be the same size?
    If that's the case, when I look at the first row on that page the issue is with images themselves, the middle image and those two around it don't have the same aspect ratio.

    In order to have them the same size try using images with same aspect ratio.

    If I'm missing the point here please let me know and I'll look further into this :slight_smile:

    Best regards,
    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan!

    I checked the page and apart of "width:auto!important;" there's also an inline style for height setting fixed height of 400px for these images. Since it's an "inline" style you probably may not be able to edit it so in order to fix that you will want to add yet another rule to your CSS:

    .category-products .h-product img {height:auto!important;}

    When tested in browser, that works. Please note: "!important" should be used as rarely as possible but in this case you need to override an inline style so it's fine :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.