How to get height of CSS manipulated image?

Question

I'm having some div boxes where there is an image inside. What I want it to do, is to add a class to the image if the image height is smaller than the div box its inside.

But I have set the image to be a 100% width of the div box, so when I use jquery's .Height() on the image, it gives me the original size. Any suggestions?

    <div class="boxe">
        <asp:Literal ID="imgProjekt1" runat="server" />
        <asp:Literal ID="litProjekt1" runat="server"/>
    </div>

    <div class="boxe forsideboxMiddle">
        <asp:Literal ID="imgProjekt2" runat="server" />
        <asp:Literal ID="litProjekt2" runat="server"/>
    </div>

The literal with the ID imgProjekt1 and ImgProjekt2 makes a normal img tag from codebehind.

Could you post example code? This sounds like it's something very specific to how your page is laid out. — brokethebuildagain, Jul 14 '14 at 16:14
OK thanks! I suspect this has to do with when you're calling `.height()`. Are you calling it in your `onReady` or somewhere else? — brokethebuildagain, Jul 14 '14 at 16:23
What happens when you call it after your image's `onload` event? — brokethebuildagain, Jul 14 '14 at 16:27

silentw · Accepted Answer · 2014-07-14T20:54:03.853

0

$(function() {
    var myImage = $('img'),
        originalHeight = myImage.height();

    getImgSize(myImage, originalHeight, myImage[0].src);
});

/* http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser */
function getImgSize(myImage, currentHeight, imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
        if(newImg.height > currentHeight) {
           myImage.addClass('smaller');
            alert(newImg.height + ' > ' + currentHeight);
        }
    }

    newImg.src = imgSrc;
}

DEMO

EDIT:

The class should only be added to the image when it's smaller than it's parent div in height. Bigger images shouldn't get the class, even if they are smaller than the source image.

Time for the code:

$(function() {
    var myImage = $('img');

    getImgSize(myImage);
});

/* http://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser */
function getImgSize(myImage) {
    myImage.each(function() {
        var that = $(this),
            parent = that.parent(),
            originalHeight = that.height(),
            parentHeight = parent.height(),
            newImg = new Image();

        newImg.onload = function() {
            if(
                newImg.height > originalHeight &&
                parentHeight > originalHeight
            ) {
               that.addClass('smaller');
            }
        }

        newImg.src = that[0].src;
    });        
}

DEMO2

edited Jul 14 '14 at 20:54

answered Jul 14 '14 at 16:31

silentw

4,835
4
25
45

it doesnt....It also takes images that are bigger than the box and makes them have the class to? – user3661240 Jul 14 '14 at 17:01
The class should only be added to the image that is smaller than the dic box they are in side, the ones that are bigger than the bow in height shouldtn get the class – user3661240 Jul 14 '14 at 17:28
I guess [**this**](http://jsfiddle.net/43Fud/1/) is what you want, check it please :) – silentw Jul 14 '14 at 20:51
I've added the css to the class in the fiddle. Can you please check it out? Its works om my website, but when i refresh the page it sometimes add's the class to all images – user3661240 Jul 15 '14 at 09:41
About the "add's the class to all images" you've got to give me an example to test it out. Don't forget that if you put `position: absolute` to the image, the parent (div) has got to be `position: relative` so that the image stays inside the div box. – silentw Jul 15 '14 at 20:31
I know, but i gave up on the javascript and made it in the codebhind in .NET :) But thanks for all the suggestions – user3661240 Jul 15 '14 at 21:25
Anyway, if my answer was helpfull to your problem even though you ended up doing it another way, please accept it. Thanks! – silentw Jul 16 '14 at 08:52

How to get height of CSS manipulated image?

1 Answers1

EDIT: