CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
user3661240
user3661240

Reputation: 53

How to get height of image manipulated with css

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 boxs height its inside.

But I have set the image to be a 100% width of the div box with css, 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.

Upvotes: 1

Views: 9210

Answers (3)

Khanh Duc Tran
Khanh Duc Tran

Reputation: 34

use window.getComputedStyle to get current DOM's object style value. Below is code example of how to extract height and width of dom object. 

function Scale(width_offset, height_offset) {
   var imgs = document.getElementsByClassName("your img tag class name");
   for (var i = 0; i < imgs.length; i++) {
     var curr_width = parseInt(window.getComputedStyle(imgs[i]).width); // extract dom's width
     var curr_height = parseInt(window.getComputedStyle(imgs[i]).height); //extract dom's height
     imgs[i].style.width = curr_width + width_offset + "px";
     imgs[i].style.height = curr_height + height_offset + "px";
   }
}

Upvotes: 0

A1rPun
A1rPun

Reputation: 16847

You should use clientWidth & clientHeight.

var img = document.getElementById('imgProjekt1'); 
var width = img.clientWidth;
var height = img.clientHeight;

Edit:

$(window).load(function () { 
    var image = $('.boxe img');
    var box = $(".boxe");
    if (image[0].clientHeight > box[0].clientHeight) { 
        image.addClass('billedMiddle');
    }
});

Upvotes: 1

Dino
Dino

Reputation: 806

try 

var currentContentHeight = contentElement.offsetHeight;

Upvotes: 2

Related Questions