jquery max-height and max-width returns wrong values

Question

im having a problem with max-width and max-height. lets say i have the following css rule:

img.item { max-width: 325px; max-height: 390px; }

and the following img in my document:

<img class="item" src="http://us.dorothyperkins.com/wcsstore/DorothyPerkinsUS/images/catalog/80000095_normal.jpg">

original image width x height is: 342 x 464

if i try and get with jquery the values for max-width and max-height i get them wrong.

$('img.item').css('max-width');
// returns 357px
$('img.item').css('max-height');
// returns 429px

any ideas on why is this? or how i can get the correct sizes?

if i use $('img.item').width() and $('img.item').height() i get the calculated values, not good for me.

thanks.

Answer 1

I have check you code and add latest jquery, it works well with the correct result. Please check my code here.

alert($('img.item').css('max-width'));

alert($('img.item').css('max-height'));

img.item { max-width: 325px; max-height: 390px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="item" src="http://us.dorothyperkins.com/wcsstore/DorothyPerkinsUS/images/catalog/80000095_normal.jpg">

There might me other reason is, Your image max-height and max-width might be overwrite by other class