CODEWITHSUNDEEP
jquerycssheight
Raphael Jeger
Raphael Jeger

Reputation: 5232

jQuery height seems wrong

I have to resize images based on their mode (portrait or landscape) on the client.

However, the height jQuery gives me seems wrong. The images are inside a wrapping DIV which has a max-height and overflow:hidden, but still the reported height seems like it would be height:auto

This is my HTML (example)

<div class="fix">
    <div class="content">
        <img src="">
    </div>
</div>
<div class="max">
    <div class="content">
        <img src="">
    </div>
</div>

The CSS

div{
    border: 1px solid black;
    position:relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}
.fix{
    height:200px;
    border: 1px solid red;
    overflow:hidden;
}
.max{
    max-height:200px;
    border: 1px solid blue;
    overflow:hidden;
}

and the JS-code

$('.content').each(function(){
   alert($(this).height());
});

Here is my fiddle:

http://jsfiddle.net/MLa9Z/

Upvotes: 0

Views: 569

Answers (2)

XNargaHuntress
XNargaHuntress

Reputation: 751

As others have said, the divs you are checking are reporting the correct height. Their parents are the ones upon which you are setting the limitation.

Think of overflow: hidden like a window and not a paint program. If you look out the window, and see part of a tree, the rest of the tree is not 'cropped' or non-existent...you just can't see it. The tree is still [insert number here] feet tall.

Now, if you stick the max and fix classes onto the content divs instead-of/as-well-as their containers, then your code will report the sizes which you think it should be reporting.

Upvotes: 1

cernunnos
cernunnos

Reputation: 2806

The div you are giving a fixed height to has 200px, but the div inside that one (with class content) doesnt. Essentially you are hiding any overflow content, but the size of the content remains the same.

Try inspecting your elements and using the metrics (chrome) or layout (firebug) tab to view real heights.

If you want to resize the image you have to apply the style directly to the image, not the parent element, otherwise you will crop the image instead (using overflow:hidden)

.fix img{
    height:200px;
}

Upvotes: 1

Related Questions